/* UK Agency Fam Trip 2027: pop-up (loaded on demand) and landing page. */

.has-fam-popup {
  overflow: hidden;
}

.fam-popup {
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--color-ink);
  background-color: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(20, 23, 28, 0.3);
}

.fam-popup::backdrop {
  background-color: rgba(20, 23, 28, 0.6);
}

.fam-popup__panel {
  padding: 1rem 1.25rem 1.25rem;
}

.fam-popup__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.fam-popup__eyebrow {
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--color-sand);
  border-radius: 999px;
}

.fam-popup__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.fam-popup__close:hover {
  background-color: var(--color-sand);
}

.fam-popup__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1179 / 798;
  max-height: min(300px, 34vh);
  object-fit: cover;
  border-radius: 8px;
  background-color: var(--color-sand);
}

.fam-popup__title {
  margin: 1rem 0 0.5rem;
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  line-height: 1.2;
}

.fam-popup__title:focus {
  outline: none;
}

.fam-popup__text {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

.fam-popup__badges,
.fam-popup__benefits {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.fam-popup__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fam-popup__badges li {
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: var(--color-sand);
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

.fam-popup__benefits li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0;
}

.fam-popup__tick {
  flex: none;
}

.fam-popup__actions {
  display: grid;
  gap: 0.5rem;
}

.fam-popup__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  box-sizing: border-box;
  font-weight: 700;
  color: var(--color-ink);
  background-color: #b7ff00;
  border-color: #b7ff00;
}

.fam-popup__later {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.fam-popup__note {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  text-align: center;
  color: var(--color-charcoal);
}

@media (min-width: 641px) {
  .fam-popup__panel {
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .fam-popup__actions {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* Phones: bottom sheet. */
@media (max-width: 640px) {
  .fam-popup {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }

  .fam-popup__image {
    max-height: 30vh;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fam-popup[open] {
    animation: fam-popup-in 0.18s ease-out;
  }

  @keyframes fam-popup-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* --- Landing page ---------------------------------------------------------------- */

.fam-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c7a00;
}

.fam-programme {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-2);
}

.fam-programme li {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-left: 3px solid #b7ff00;
  border-radius: var(--radius);
  background-color: var(--color-paper);
}

.fam-programme strong {
  display: block;
  margin-bottom: 0.25rem;
}

.fam-apply {
  scroll-margin-top: 5rem;
}

.fam-closed,
.fam-success {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-sand);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.fam-success h2:focus {
  outline: none;
}

.fam-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.fam-form__check input {
  margin-top: 0.25rem;
  flex: none;
}

.fam-form [hidden],
.fam-closed[hidden],
.fam-success[hidden] {
  display: none;
}

.fam-hero-image {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  aspect-ratio: 1179 / 798;
  margin-top: var(--space-3);
  object-fit: cover;
  border-radius: 8px;
  background-color: var(--color-sand);
}

/* Landing page FAQ (accordion) */
.fam-faq__list { display: grid; gap: 10px; margin-top: 18px; }
.fam-faq__item { border: 1px solid var(--color-line, #d9dde3); border-radius: 12px; background: #fff; }
.fam-faq__item summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; position: relative;
}
.fam-faq__item summary::-webkit-details-marker { display: none; }
.fam-faq__item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1;
}
.fam-faq__item[open] summary::after { content: "–"; }
.fam-faq__item summary:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; border-radius: 12px; }
.fam-faq__item p { margin: 0; padding: 0 18px 18px; }

/* Country-specific invitation line under the H1 and the at-a-glance facts */
.page-section > p.fam-invite {
  margin: var(--space-1) 0 var(--space-1);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.25;
}
.page-section > p.fam-subline { margin: 0 0 var(--space-2); }
.fam-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}
.fam-facts li {
  padding: 6px 12px;
  border-radius: 999px;
  background: #f2f4ee;
  border: 1px solid var(--color-line, #d9dde3);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- Landing page visuals: hero media, at-a-glance panel, photo cards, timeline, participation ---- */
.fam-hero-media {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: var(--space-2);
  height: clamp(240px, 24vw, 320px);
}
.fam-hero-media figure { margin: 0; position: relative; overflow: hidden; border-radius: 14px; background: #14171c; }
.fam-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fam-hero-media figcaption {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(20, 23, 28, 0.78); color: #fff; font-size: 0.75rem; font-weight: 600;
}
@media (max-width: 640px) {
  .fam-hero-media { grid-template-columns: 1fr; height: auto; }
  .fam-hero-media__main { aspect-ratio: 3 / 2; }
  .fam-hero-media__side { display: none; }
}

.fam-glance {
  margin: var(--space-4) auto;
  padding: var(--space-3);
  border-radius: 16px;
  background: #14171c;
  color: #fff;
}
.fam-glance h2 { margin: 0 0 var(--space-2); color: #fff; font-size: 1.25rem; }
.fam-glance__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 var(--space-2);
}
.fam-glance__grid > div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.fam-glance dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #b7ff00; font-weight: 700; }
.fam-glance dd { margin: 4px 0 0; font-weight: 700; font-size: 1.05rem; }
.fam-glance__notes { margin: 0 0 var(--space-1); padding-left: 1.1rem; }
.fam-glance__fine { margin: 0 0 var(--space-2); font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }
@media (max-width: 760px) {
  .fam-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fam-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--space-2); }
.fam-card { border: 1px solid var(--color-line, #d9dde3); border-radius: 14px; overflow: hidden; background: #fff; }
.fam-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #14171c; }
.fam-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fam-card__body { padding: 14px 16px 18px; }
.fam-card__body h3 { margin: 0 0 6px; font-size: 1.1rem; }
.fam-card__body p { margin: 0; }
@media (max-width: 640px) {
  .fam-cards { grid-template-columns: 1fr; }
}

.fam-timeline { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fam-stage { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border: 1px solid var(--color-line, #d9dde3); border-radius: 14px; background: #fff; }
.fam-stage__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: #14171c; color: #b7ff00; display: flex; align-items: center; justify-content: center; }
.fam-stage__day { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #5c7a00; }
.fam-stage h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.fam-stage p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 900px) {
  .fam-timeline { grid-template-columns: 1fr; gap: 10px; }
  .fam-stage { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
}

.fam-participation__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: var(--space-2) 0; }
.fam-participation__col { padding: 14px 16px; border: 1px solid var(--color-line, #d9dde3); border-radius: 14px; background: #fff; }
.fam-participation__col h3 { margin: 0 0 6px; font-size: 1rem; }
.fam-participation__col ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 760px) {
  .fam-participation__grid { grid-template-columns: 1fr; }
}

/* Photo labels: every photo says whether it is one of our projects or an illustration */
.fam-badge {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(20, 23, 28, 0.78); color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1.4;
}
.fam-badge--illustrative { background: rgba(255, 255, 255, 0.9); color: #14171c; }
.fam-hero-media__side .fam-badge { font-size: 0.7rem; }
.page-section > p.fam-photo-note { margin: 0 0 var(--space-2); font-size: 0.92rem; color: #4a5260; }

/* ---- Final UX pass: hero rhythm, stronger CTA, readable body copy ---- */
[data-cta-location="hero"] .fam-eyebrow { margin-bottom: var(--space-1); }
[data-cta-location="hero"] h1 { margin-bottom: var(--space-1); }
.page-section > p.fam-invite { margin: 0 0 4px; }
.page-section > p.fam-subline { margin: 0 0 var(--space-1); }
[data-cta-location="hero"] .page-section__lede { margin: 0; font-size: 1.125rem; line-height: 1.55; }
[data-cta-location="hero"] .hero-actions { margin-top: var(--space-2); }
.fam-hero-cta {
  min-height: 52px; padding: 0.8rem 1.9rem; font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(183, 255, 0, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fam-hero-cta:hover, .fam-hero-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(183, 255, 0, 0.45); }
.fam-hero-cta:focus-visible { outline: 3px solid #14171c; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fam-hero-cta { transition: none; } .fam-hero-cta:hover, .fam-hero-cta:focus-visible { transform: none; } }
@media (max-width: 640px) { .fam-hero-cta { width: 100%; justify-content: center; } }
.fam-card__body p { font-size: 1rem; line-height: 1.55; color: var(--color-charcoal, #2b303a); }
.fam-participation__col ul { font-size: 1rem; line-height: 1.55; }
.fam-glance__fine { font-size: 0.95rem; }
.page-section > p.fam-photo-note { font-size: 0.95rem; }