/* Family cluster pages (ES/EN/DE): the holiday guide and the attractions
   ranking, generated by scripts/generate-family-guide.mjs and
   scripts/generate-family-attractions.mjs. Layered on editorial-guide.css and
   family-attractions.css; only what those two do not already provide lives
   here. */

/* Header: language chips beside the nav, so readers can see the page exists
   in their language (hreflang alone is invisible to them). */
.site-header__inner { flex-wrap: wrap; }
.lang-switch { display: flex; gap: 6px; }
.lang-switch a, .lang-switch span { display: inline-block; min-width: 2.4rem; padding: 3px 8px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 6px; color: #e8f1f4; font-size: .8rem; font-weight: 800; line-height: 1.5; text-align: center; text-decoration: none; }
.lang-switch a:hover { border-color: #ffd17b; color: #ffd17b; }
.lang-switch [aria-current] { background: #fff; border-color: #fff; color: var(--night); }

/* Hero with a real photo: the old page showed a letterboxed stock image with
   the title overflowing it. */
.hero--family { padding: 56px 0 60px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 44px; align-items: center; }
.hero__photo { margin: 0; }
.hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px rgba(6, 26, 36, .35); }
.hero__photo figcaption { margin-top: 10px; color: #e6f2f4; font-size: .86rem; line-height: 1.5; }
.hero__photo figcaption a { color: #fff; }
.guide-meta a { color: #fff; }

.answer ul { margin: .7rem 0 0; }

/* On small screens the sticky table of contents is replaced by a row of
   jump links under the quick answer, so the answer is the first thing read. */
.jump-links { display: none; }

.zone-grid { margin-top: 1.4rem; }
.zone-card h3 { margin-bottom: 0; }
.zone-card p { margin: .6rem 0 0; }
.zone-card__fit { color: var(--sun-dark); font-size: .95rem; font-weight: 800; }
.zone-card__watch { padding: 10px 12px; border-radius: 10px; background: #fff6df; font-size: .93rem; }
.zone-card__meta { color: var(--muted); font-size: .9rem; }

.guide-figure { margin: 1.8rem 0 0; overflow: hidden; border-radius: 14px; background: #e5ecef; }
.guide-figure img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; }
.guide-figure figcaption { padding: 9px 13px; background: #f3f6f7; color: #4f606b; font-size: .82rem; line-height: 1.5; }
.guide-figure figcaption a { color: #315c70; }

.tip h3 { margin-top: 0; }

/* Practical facts per attraction: opening, price, getting there. */
.attraction__facts { display: grid; gap: 8px; margin: 1.1rem 0; padding: 14px 16px; border-radius: 12px; background: #f3f8f9; }
.attraction__facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; }
.attraction__facts dt { color: var(--night); font-weight: 800; }
.attraction__facts dd { margin: 0; }
.table-note { color: var(--muted); font-size: .9rem; }
.comparison { margin-bottom: .6rem; }
.season-card p { margin: .5rem 0 0; }
.season-card__temp { color: var(--ocean); font-weight: 800; }

.week-plan { margin-top: 1rem; padding: 0; list-style: none; }
.week-plan li { max-width: none; padding: 13px 16px; border-left: 4px solid var(--ocean); border-radius: 0 10px 10px 0; background: #f3f8f9; }
.week-plan li + li { margin-top: .6rem; }

.cta-link { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--sun-dark); color: #fff; font-weight: 800; text-decoration: none; }
.cta-link:hover { background: #9c3c13; color: #fff; }

.byline-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.byline-card img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.byline-card p { margin: 0; }
.byline-card p + p { margin-top: .35rem; color: var(--muted); font-size: .93rem; }

.next-links { display: flex; flex-wrap: wrap; gap: 10px; margin: .9rem 0 0; padding: 0; list-style: none; }
.next-links li + li { margin-top: 0; }
.related .next-links a { display: inline-block; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff; font-size: .92rem; font-weight: 700; text-decoration: none; }
.related .next-links a:hover { background: #fff; color: var(--night); }

/* The old footer was a single sentence with no links: a reader who reached
   the end of the page had nowhere to go but back to Google. */
.site-footer--rich { padding: 48px 0 28px; text-align: left; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; width: min(1120px, calc(100% - 40px)); margin: auto; }
.site-footer__grid h2 { margin: 0 0 10px; color: #fff; font-family: "Montserrat", "Nunito Sans", sans-serif; font-size: 1rem; }
.site-footer__grid p { margin: 0; line-height: 1.6; }
.site-footer__grid .site-footer__extra { margin-top: 12px; }
.site-footer__grid ul { margin: 0; padding: 0; list-style: none; }
.site-footer__grid li + li { margin-top: 6px; }
.site-footer__grid a { color: #d8e4e7; text-decoration: none; }
.site-footer__grid a:hover { color: #ffd17b; }
.site-footer__legal { width: min(1120px, calc(100% - 40px)); margin: 28px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); text-align: center; }

@media (max-width: 820px) {
  .hero--family { padding: 40px 0 44px; }
  .hero__grid { grid-template-columns: 1fr; gap: 22px; }
  .hero__photo img { aspect-ratio: 16 / 9; }
  .toc { display: none; }
  .attraction__facts div { grid-template-columns: 1fr; gap: 0; }
  .jump-links { display: flex; gap: 8px; margin-top: 1rem; padding-bottom: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jump-links a { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .88rem; font-weight: 700; text-decoration: none; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Phones: keep the promise, the photo and the start of the quick answer
   close to the first screen. */
@media (max-width: 620px) {
  .site-header__inner { flex-direction: row; align-items: center; row-gap: 8px; }
  .site-nav { order: 3; width: 100%; gap: 4px 16px; font-size: .88rem; }
  .hero__lede { margin-top: 16px; }
  .guide-meta { gap: 4px 14px; margin-top: 18px; font-size: .85rem; }
  .hero__photo img { aspect-ratio: 2 / 1; }
  /* The at-a-glance table: label and value on one line, so eight rows stay a
     glance instead of forty stacked cells. */
  .comparison--glance td { padding: 2px 14px; }
  .comparison--glance td::before { display: inline; margin-right: 6px; }
  .comparison--glance td:first-child::before { display: none; }
  .site-footer__grid { grid-template-columns: 1fr; }
}