/* Search landing pages (/goa, /goa/<topic>) — builds on site.css. */

.seo-facts { list-style: none; margin-top: 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seo-facts li {
  padding: .4rem .8rem; border-radius: 999px; background: rgb(255 255 255 / 80%); border: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-700);
}
.seo-facts strong { color: var(--sea-900); }

.seo-h2 {
  margin-bottom: .8rem;
  font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.35rem, 3vw, 1.7rem); letter-spacing: -.015em; color: var(--sea-950);
}
.seo-two { display: grid; gap: 24px; }
@media (min-width: 860px) { .seo-two { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.seo-why { list-style: none; padding: 0; display: grid; gap: 10px; }
.seo-why li { display: grid; gap: 2px; padding: .85rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.seo-why strong { color: var(--sea-900); }
.seo-why span { font-size: .9rem; color: var(--ink-500); }

.seo-faq { max-width: 52rem; }
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary {
  cursor: pointer; padding: 1rem 1.1rem; font-weight: 700; color: var(--sea-950); list-style: none;
  display: flex; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--sea-700); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 1.1rem 1rem; color: var(--ink-700); line-height: 1.65; }

.seo-links { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-links .cat-chip { text-decoration: none; }
.seo-cta { margin-top: 22px; }

.seo-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.seo-tile {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.seo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.seo-tile img, .seo-tile__blank { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sea-100); }
.seo-tile__blank { display: block; }
.seo-tile__body { display: grid; gap: 2px; padding: .9rem 1rem 1rem; }
.seo-tile__body strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--sea-950); }
.seo-tile__body small { color: var(--ink-500); }
@media (max-width: 700px) {
  .seo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .seo-tile__body { padding: .6rem .7rem .7rem; }
  .seo-tile__body strong { font-size: .95rem; }
}