/* globalprep.css: GlobalPrep layer on top of the ported Food for Joe CSS.
   The ported files stay as they were (only colours and fonts come from tokens.css). This file swaps
   imagery for GlobalPrep illustrations and adds the few blocks Food for Joe did not have. */

/* ── Header ───────────────────────────────────────────────────────────── */
/* The FFJ logo was a tall badge hanging below the bar. The GlobalPrep lockup is wide, so it is centred in the bar. */
.Header_logo { width: 150px; height: 54px; display: flex; align-items: center; transform: translateX(-50%); }
.Header_logo img { width: 100%; height: auto; }
.Header_logoSticky { transform: translateX(-50%); }
.Header_logoHidden { transform: translateX(-50%) translateY(-100%); }
@media (min-width: 1350px) {
  .Header_logo { flex: 0 0 210px; width: 210px; height: 100px; transform: translateX(-50%); }
  .Header_logoSticky { transform: translateX(-50%) scale(0.85); }
}
.CookieBanner_image { width: 110px; }
.Header_preheader { background: var(--gp-teal); color: var(--gp-cream); }
.Header_preheaderContent { letter-spacing: 0.06em; }

/* ── Hero: GlobalPrep illustration replaces the photo ───────────────────── */
@media (max-width: 1199px) {
  .Hero_hero:after {
    background: url("../../assets/illustrations/hero-mobile.svg") 50% / cover no-repeat;
  }
}
@media (min-width: 1200px) {
  .Hero_hero {
    background-image: url("../../assets/illustrations/hero-desktop.svg");
    background-position: 100% 100%;
    background-size: min(100%, 2300px) auto;
  }
}
.Hero_subtitle { max-width: 330px; }
.Hero_buttonIcon { width: 34px; }
.Hero_petButtons > * { flex: 1 1 140px; min-width: 0; }
.Hero_petButtons .Button_button { white-space: normal; line-height: 1.15; width: 100%; }
@media (max-width: 420px) { .Hero_petButtons .Button_button { font-size: 15px; padding: 0 10px; } .Hero_buttonIcon { width: 26px; margin-right: 6px; } }

/* ── Reviews: placeholder cards ─────────────────────────────────────────── */
.GP_placeholder {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-light-yellow);
  outline: 1px dashed var(--gp-amber-dark);
  color: var(--gp-amber-dark);
  font-size: 0.85em;
  font-family: var(--font-family-system);
}

/* ── What is GlobalPrep: scalloped cream badge ──────────────────────────── */
.WhatIsIt_emoji {
  width: 84px;
  height: 84px;
  background-image: url("../../assets/textures/cream-badge.svg");
}
.WhatIsIt_emoji img { width: 56px; }
.WhatIsIt_step { flex-basis: 140px; }
.WhatIsIt_step p { line-height: 1.25; }

/* ── Report card in, roadmap out ───────────────────────────────────────── */
.CustomRecipe_fediaf { width: 24%; height: auto; right: 6%; top: 2%; }

/* ── Subject accelerator cards ─────────────────────────────────────────── */
.MealCard_proteinStamp { width: 72px; top: 12px; left: auto; right: 12px; }
.ImageCard_image { background-size: cover !important; background-position: center !important; }

/* ── Pricing: plan toggle and curriculum tiles ─────────────────────────── */
.PricePerSize_petKind img { width: 32px !important; height: 32px !important; }
.PricePerSize_sizeImage { object-fit: contain; padding: 14px; }
.PricePerSize_planNote { max-width: 620px; margin: 6px auto 0; text-align: center; font-size: 15px; }
.PricePerSize_price .GP_placeholder { font-size: 0.5em; vertical-align: middle; }

/* ── Tutors and founders ───────────────────────────────────────────────── */
.VeterinarySection_image { object-fit: cover; background: var(--gp-cream); }
.GP_facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; padding: 0; list-style: none; }
.GP_facts li { padding: 4px 12px; border-radius: 500px; background: var(--color-pale-green); font-size: 14px; }

/* ── Method section (new): the Four Dots ───────────────────────────────── */
.GP_method { background: var(--gp-cream); padding: 60px 0; }
.GP_methodHead { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.GP_methodHead .headline { margin: 8px 0 12px; }
.GP_methodSteps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dot;
}
.GP_methodStep {
  position: relative;
  background: var(--color-white);
  border-radius: var(--gp-radius-card);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.GP_methodDot {
  width: calc(18px + var(--i) * 6px);
  height: calc(18px + var(--i) * 6px);
  border-radius: 50%;
  background: var(--gp-teal);
  margin-bottom: 6px;
}
.GP_methodStep:last-child .GP_methodDot { background: var(--gp-amber); }
.GP_methodStep h3 { font-size: 22px; }
.GP_methodStep .GP_methodKicker { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gp-amber-dark); }
.GP_methodStage { margin-top: 40px; display: flex; justify-content: center; }
.GP_methodStage .GPJourney { width: min(900px, 100%); }
@media (min-width: 960px) {
  .GP_method { padding: 90px 0; }
  .GP_methodSteps { grid-template-columns: repeat(4, 1fr); align-items: end; }
  .GP_methodStep:nth-child(2) { margin-bottom: 18px; }
  .GP_methodStep:nth-child(3) { margin-bottom: 36px; }
  .GP_methodStep:nth-child(4) { margin-bottom: 54px; }
}

/* ── Curricula strip (new) ─────────────────────────────────────────────── */
.GP_curricula { background: var(--color-white); padding: 60px 0; text-align: center; }
.GP_curricula .headline { margin: 8px 0 28px; }
.GP_curriculaGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; text-align: left; }
.GP_curriculum { border: 1px solid var(--gp-border-subtle); border-radius: var(--gp-radius-card); padding: 18px 20px; background: var(--gp-cream); }
.GP_curriculum strong { display: block; font-size: 20px; margin-bottom: 4px; }
.GP_curriculum span { font-size: 15px; }

/* ── Portal pitch (new) ────────────────────────────────────────────────── */
.GP_portal { background: var(--gp-teal); color: var(--gp-cream); padding: 60px 0; overflow: hidden; }
.GP_portalGrid { display: grid; gap: 30px; align-items: center; }
.GP_portal .sectionHeader { color: var(--gp-amber); filter: none; }
.GP_portal .headline { margin: 8px 0 14px; }
.GP_portal ul { margin: 18px 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.GP_portal li { display: flex; gap: 10px; align-items: flex-start; }
.GP_portal li .GPDots { flex: none; margin-top: 4px; }
.GP_portalCard { background: var(--gp-cream); color: var(--gp-teal); border-radius: var(--gp-radius-card); padding: 18px 12px 8px; box-shadow: var(--ffj-shadow-lg); }
.GP_portalCard p { padding: 0 14px; font-size: 14px; }
@media (min-width: 960px) {
  .GP_portal { padding: 90px 0; }
  .GP_portalGrid { grid-template-columns: 1fr 1.1fr; gap: 60px; }
}

/* ── Trial banner on cream with the illustration ───────────────────────── */
.TrialBanner_trialBanner { background: var(--gp-cream); }
.TrialBanner_image { left: auto; right: -260px; }
@media (min-width: 960px) {
  .TrialBanner_image { left: auto; right: 0; transform: none; }
  .TrialBanner_content { max-width: 620px; }
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.Footer_logo img { width: 180px; height: auto; }
.Footer_tagline { margin-top: 10px; font-size: 15px; opacity: 0.85; max-width: 280px; }

/* ── Promo popup (HTML card instead of the campaign image) ─────────────── */
.GP_promo { padding: 34px 28px 10px; color: var(--gp-cream); text-align: center; max-width: 420px; }
.GP_promo img { width: 62%; max-width: 260px; height: auto; margin: 0 auto 16px; display: block; }
.GP_promo .label { color: var(--gp-cream); }
.GP_promo p { margin: 10px 0 0; }

/* ── Floating WhatsApp avatar ──────────────────────────────────────────── */
.FloatingWhatsApp_avatar img { background: var(--gp-teal); border-radius: 50%; }

/* ── Small screens: chooser card and plan toggle fit at 360 to 420px ──── */
@media (max-width: 1199px) {
  .Hero_cta { width: 100%; max-width: 520px; }
}
@media (max-width: 600px) {
  .PricePerSize_petKinds { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .PricePerSize_petKind { font-size: 14px; }
}

/* ══════════════════════ Phone-first (v1.1) ══════════════════════
   Checked at 360, 390 and 430 px. Desktop rules above stay untouched. */
@media (max-width: 599px) {
  .GP_hideMobile { display: none; }
  .Header_preheaderContent { font-size: 12px; letter-spacing: 0.04em; }

  /* Hero: one clear choice per row, full width, single-line labels */
  .Hero_petButtonsContainer { padding: 18px 16px; }
  .Hero_petButtonsTitle { font-size: 21px; }
  .Hero_petButtons { flex-direction: column; width: 100%; gap: 10px; }
  .Hero_petButtons > * { flex: none; width: 100%; }
  .Hero_petButtons .Button_button { white-space: nowrap; font-size: 16px; min-height: 56px; }
  .Hero_buttonIcon { width: 28px; }
  .Hero_heroBadge .GreenBadge_greenBadge { font-size: 13px; }

  /* Method: a swipeable row of the four dots, the next card peeks in */
  .GP_methodSteps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin: 0 -20px;
    padding: 4px 20px 14px;
    scrollbar-width: none;
  }
  .GP_methodSteps::-webkit-scrollbar { display: none; }
  .GP_methodStep { flex: 0 0 78%; scroll-snap-align: center; margin-bottom: 0 !important; }

  /* Curricula: two columns */
  .GP_curriculaGrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .GP_curriculum { padding: 14px; }
  .GP_curriculum strong { font-size: 17px; }
  .GP_curriculum span { font-size: 13px; }

  /* Plans: the six level tiles as a 3 x 2 grid */
  .PricePerSize_sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; }
  .PricePerSize_size { max-width: none; padding: 10px 6px; border-radius: 12px; }
  .PricePerSize_sizeImage { width: 52px; height: 52px; padding: 6px; }
  .PricePerSize_petKinds { padding: 0 16px; }
  .PricePerSize_petKind { width: 100%; justify-content: center; }

  /* Carousel call to action: the label is never clipped */
  .OurRecipes_cta { max-width: none; overflow: visible; }
  .OurRecipes_cta .Button_button { white-space: nowrap; padding: 0 28px; }

  /* Journeys on narrow screens: keep the first and the goal labels */
  .GPJourney_stop:not(:first-of-type):not(.GPJourney_stopGoal) .GPJourney_label { display: none; }
  .GP_portalCard { padding: 10px 4px 6px; }

  .Footer_navigationLink, .Footer_navigationCategory summary { padding: 6px 0; display: inline-block; }
}

/* Compact header (below the full desktop navigation): "Portal" instead of "Student portal" */
@media (max-width: 1349px) {
  .Header_login .GP_hideMobile { display: none; }
}