/*
 * Feast and Find, Homepage Styles
 * Source: Figma node 3312:2, measured 2026-04-16
 * All selectors prefixed ffh- (feast-find-homepage)
 */

/* ── Reset Astra on homepage ──────────────────────────── */
.ff-homepage { max-width: none; margin: 0; padding: 0; }


/* ═══════════════════════════════════════════════
   SHARED: BUTTONS
   ═══════════════════════════════════════════════ */

.ffh-btn {
  display: inline-block;
  font-family: var(--wp--preset--font-family--primary);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 28px;
  padding: 16px 32px;
  border-radius: var(--ff-radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ff-ease-fast), transform var(--ff-ease-fast), box-shadow var(--ff-ease-fast);
}
.ffh-btn:hover { transform: translateY(-1px); }

/* Keyboard focus ring for every .ffh-btn variant, matches the social
 * icon :focus-visible treatment (coral outline, 2-px offset). Invisible
 * to mouse users, clearly visible to keyboard users. :focus-visible
 * rather than :focus so mouse clicks don't trigger a persistent ring. */
.ffh-btn:focus-visible {
  outline: 2px solid var(--ff-coral);
  outline-offset: 3px;
}

/* Reduce-motion support, suppress the hover lift on .ffh-btn family
 * and common hover-transformed cards. Pairs with the prior pass's
 * reduce-motion rules on the hero / creator photos. */
@media (prefers-reduced-motion: reduce) {
  .ffh-btn:hover,
  .ffh-tool-card:hover,
  .ffh-video-card:hover,
  .ffh-article:hover,
  .ffh-channel-card:hover,
  a.ffh-product:hover {
    transform: none;
  }
}

.ffh-btn--coral {
  background: var(--ff-coral);
  color: var(--ff-white);
  box-shadow: var(--ff-shadow-button);
}
.ffh-btn--coral:hover { background: var(--ff-coral-dark); color: var(--ff-white); }

.ffh-btn--teal {
  background: var(--ff-teal);
  color: var(--ff-teal-dark);
}
.ffh-btn--teal:hover { background: #7ae8ca; color: var(--ff-teal-dark); }

.ffh-btn--outline-ocean {
  background: transparent;
  border: 2px solid var(--ff-ocean);
  color: var(--ff-ocean);
  font-size: 1rem;
  padding: 14px 24px;
}
.ffh-btn--outline-ocean:hover { background: var(--ff-ocean); color: var(--ff-white); }


/* ── Badge ────────────────────────────────────────────── */

.ffh-badge {
  display: inline-block;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 16px;
}
/*
 * Small-text teal badge.
 * Uses a deeper teal (#004d44) instead of --ff-teal-dark (#00705e) so the
 * 12px text passes WCAG AA (4.5:1) against the #98f0da background.
 * The lighter teal-dark is still correct for 18px+ button text (large-text AA).
 */
.ffh-badge--teal {
  background: var(--ff-teal);
  color: #004d44;
  padding: 6px 16px;
  border-radius: var(--ff-radius-pill);
}
.ffh-badge--text {
  background: none;
  padding: 0;
}

/* Text-badge color variants, replace the inline `style="color:var(--ff-*)"`
 * attributes that were scattered across page-homepage.php. Variant classes
 * keep markup clean and let future theming be one CSS edit instead of six
 * PHP template edits. */
.ffh-badge--text-ocean     { color: var(--ff-ocean); }
.ffh-badge--text-coral     { color: var(--ff-coral); }
.ffh-badge--text-teal-dark { color: var(--ff-teal-dark); }
.ffh-badge--text-teal      { color: var(--ff-teal); }

/* Wide-tracking variant for the one-off "ABOUT THE CREATORS" eyebrow on
 * the creators card. Replaces the inline `letter-spacing:2.8px` override
 * that was sitting on the creators badge. 2.8 px ≈ 0.16em on a 17-18 px
 * base, codified here so the creators section still reads as a "calmer"
 * wider eyebrow than the standard 0.1em tracking elsewhere. */
.ffh-badge--wide {
  letter-spacing: 0.16em;
}


/* ── Link ─────────────────────────────────────────────── */

.ffh-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ff-ocean);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--ff-ease-fast);
}
.ffh-link:hover { color: var(--ff-coral); }
.ffh-link:focus-visible {
  outline: 2px solid var(--ff-coral);
  outline-offset: 3px;
  border-radius: 2px;
}
.ffh-link--underline {
  font-size: 16px;
  border-bottom: 2px solid rgba(0,99,128,0.2);
  padding-bottom: 10px;
}


/* ── Container ────────────────────────────────────────── */

.ffh-container {
  max-width: var(--ff-wide-width);
  margin: 0 auto;
  padding: 0 var(--ff-page-padding);
}


/* ── Section header ───────────────────────────────────── */

/* 48 px (was 64), tightens the headline-to-content rhythm so the homepage
   reads as one flow, not stacked slabs. Mobile override at ≤480 stays 40. */
.ffh-section-header { margin-bottom: 48px; }
.ffh-section-header h2 {
  color: var(--ff-ocean);
  font-size: 36px;
  line-height: 40px;
  margin: 0 0 16px;
}
.ffh-section-header p {
  color: var(--ff-muted);
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  max-width: 672px;
}
.ffh-section-header--center { text-align: center; }
.ffh-section-header--center p { margin-inline: auto; }
.ffh-section-header--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.ffh-section-header--split h2 { font-size: 48px; line-height: 48px; }
.ffh-section-header--split p { font-size: 18px; line-height: 28px; }


/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */

.ffh-hero {
  max-width: var(--ff-wide-width);
  margin: 0 auto;
  padding: 128px var(--ff-page-padding) 80px;
  overflow: hidden;
}
.ffh-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 560px;
}
.ffh-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.ffh-hero__text h1 {
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -1.8px;
  color: var(--ff-ocean);
  margin: 0;
}
.ffh-hero__accent { color: var(--ff-coral); }
.ffh-hero__text > p {
  font-size: 20px;
  line-height: 28px;
  color: var(--ff-muted);
  max-width: 512px;
  margin: 0;
  padding-top: 8px;
}
.ffh-hero__buttons {
  display: flex;
  gap: 16px;
  padding-top: 16px;
}

/* Image frame */
.ffh-hero__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ffh-hero__image-frame {
  position: relative;
  z-index: 1;
  width: 460px;
  aspect-ratio: 4/5;
  border-radius: var(--ff-radius);
  overflow: hidden;
  box-shadow: var(--ff-shadow-deep);
  /*
   * Matched in magnitude (3deg) to the creators-section photo so both hero and
   * creator tilts feel like the same interaction. Direction is inverted (+3 here,
   * -3 below) so they read as a deliberate pair, not a symmetrical accident.
   */
  transform: rotate(3deg);
  transform-origin: center;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  background: var(--ff-sand-alt);
}

/*
 * Hero image hover: the top creator photo straightens toward level on hover,
 * returns to the resting tilt on mouse-leave. Hover target is the frame itself
 * (not the outer flex column) so the effect only fires when the cursor is
 * actually over the image, not just entering the grid cell's empty space.
 * Transitioning on transform alone keeps the motion GPU-composited and cheap.
 */
.ffh-hero__image-frame:hover {
  transform: rotate(0.25deg);
}

@media (prefers-reduced-motion: reduce) {
  .ffh-hero__image-frame,
  .ffh-hero__image-frame:hover {
    transform: rotate(0deg);
    transition: none;
  }
}
.ffh-hero__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ffh-hero__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ff-muted);
  font-size: 18px;
  background: var(--ff-sand-alt);
}

/* Decorative orbs */
.ffh-hero__orb {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
}
.ffh-hero__orb--teal {
  width: 128px; height: 128px;
  background: #9bf3dd;
  filter: blur(32px);
  opacity: 0.5;
  bottom: -14px; left: -12px;
}
.ffh-hero__orb--blue {
  width: 192px; height: 192px;
  background: #bee9ff;
  filter: blur(20px);
  opacity: 0.3;
  top: -30px; right: -40px;
}


/* ═══════════════════════════════════════════════
   TOOLS (BENTO CARDS)
   ═══════════════════════════════════════════════ */

.ffh-tools {
  background: var(--ff-sand-alt);
  padding: 80px 0;
}
.ffh-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ffh-tool-card {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  /* 2026-04-23 premium-polish pass: 33 → 32 + gap 11 → 12 puts the card
   * on the 4-/8-px grid. Zero visible shift; removes a nagging
   * off-grid artifact from the Figma measurement pass. */
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--ff-shadow-card);
  transition: box-shadow var(--ff-ease-normal), transform var(--ff-ease-normal);
}
.ffh-tool-card:hover {
  box-shadow: var(--ff-shadow-card-hover);
  transform: translateY(-3px);
}
.ffh-tool-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--ff-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ffh-tool-card__icon--blue  { background: var(--ff-icon-bg-blue); }
.ffh-tool-card__icon--teal  { background: var(--ff-icon-bg-teal); }
.ffh-tool-card__icon--coral { background: var(--ff-icon-bg-coral); }
.ffh-tool-card h3 {
  font-size: 20px;
  line-height: 28px;
  color: var(--ff-navy);
  margin: 12px 0 0;
}
.ffh-tool-card p {
  /* 2026-04-23 accessibility pass: 14 → 15 px, lh 22.75 → 24 px (1.6). Tool
   * card body copy sits mid-homepage; 14 was too tight at mobile widths. */
  font-size: 15px;
  line-height: 24px;
  color: var(--ff-muted);
  margin: 0;
}


/* ═══════════════════════════════════════════════
   LATEST VIDEOS
   Renders only when the videos data file has 1+ valid entries.
   ═══════════════════════════════════════════════ */

.ffh-videos {
  padding: 80px 0;
  background: var(--ff-sand-alt);
}

.ffh-videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Center the grid when only 1 or 2 videos exist */
.ffh-videos__grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ffh-videos__grid--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }

.ffh-video-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--ff-radius);
  transition: transform var(--ff-ease-normal);
}

.ffh-video-card:hover {
  transform: translateY(-3px);
}

.ffh-video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ff-radius);
  overflow: hidden;
  background: #c9e6ef; /* fallback color while thumbnail loads */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ffh-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ff-ease-normal);
}

.ffh-video-card:hover .ffh-video-card__thumb img {
  transform: scale(1.04);
}

/* Play badge overlay, YouTube-inspired pill shape.
 * Was a 56×56 coral circle; refined to a 68×48 rounded rectangle so it
 * reads immediately as "play a video" (that's the shape YouTube has
 * trained every internet user to expect). Keeps coral as the brand red
 * rather than YouTube's #FF0000, so the button is clearly branded while
 * borrowing YouTube's recognizable silhouette. */
.ffh-video-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background: var(--ff-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: transform var(--ff-ease-normal);
  pointer-events: none;
}

.ffh-video-card:hover .ffh-video-card__play {
  transform: scale(1.08);
}

/* Short / Video type pill in the corner */
.ffh-video-card__type {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff;
  border-radius: var(--ff-radius-pill);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.ffh-video-card__type--short { background: rgba(16, 125, 160, 0.85); } /* ocean */
.ffh-video-card__type--long  { background: rgba(15, 41, 66, 0.75); }   /* deep navy */

.ffh-video-card__title {
  font-family: var(--wp--preset--font-family--primary);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ff-navy);
  margin: 8px 0 0;
  letter-spacing: -0.01em;

  /* Clamp to 2 lines so cards stay aligned */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ffh-video-card:hover .ffh-video-card__title {
  color: var(--ff-ocean);
}

.ffh-video-card__meta {
  /* 2026-04-23 accessibility pass: 13 → 14 px. Date/duration meta. */
  font-size: 14px;
  line-height: 1.5;
  color: var(--ff-muted);
  margin: 0;
}

/*
 * ADMIN PREVIEW STATE
 * Only rendered when a manage_options user loads the homepage AND
 * latest-videos.json is empty. Clearly flagged so it's never mistaken
 * for production content. Invisible to public visitors.
 */
.ffh-videos--admin-preview {
  background: repeating-linear-gradient(
    135deg,
    var(--ff-sand-alt) 0 24px,
    #efe7d5 24px 48px
  );
}

.ffh-admin-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--ff-coral);
  background: #ffe9e4;
  padding: 6px 12px;
  border-radius: var(--ff-radius-pill);
  border: 1px dashed var(--ff-coral);
}

.ffh-videos-empty {
  margin-top: 32px;
  padding: 40px;
  background: var(--ff-white);
  border: 1px dashed rgba(154, 61, 46, 0.4);
  border-radius: var(--ff-radius);
  max-width: 880px;
}

.ffh-videos-empty__headline {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ff-navy);
  margin: 0 0 16px;
}

.ffh-videos-empty__steps {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ff-muted);
  font-size: 15px;
  line-height: 24px;
}

.ffh-videos-empty__steps code {
  background: var(--ff-sand-alt);
  color: var(--ff-navy);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.ffh-videos-empty__foot {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--ff-stone);
  /* Italic removed on this notice, italic + small + low-chroma was hard to
     read on the hatched admin background. Keeping size + tone as the cue. */
}

.ffh-videos-empty__curl {
  margin-top: 20px;
  padding: 14px 18px;
  background: #0f2942;
  color: #bee9ff;
  border-radius: var(--ff-radius-sm);
  font-size: 13px;
}
.ffh-videos-empty__curl summary {
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.2px;
}
.ffh-videos-empty__curl pre {
  margin: 12px 0 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: #d7efff;
}
.ffh-videos-empty__curl pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}
.ffh-videos-empty__curl p {
  margin: 0;
  /* Bumped 12→13 and 0.75→0.9, admin audience, but even admins deserve
     comfortable reading on a navy panel at small size. */
  font-size: 13px;
  color: rgba(190, 233, 255, 0.9);
}

/*
 * CHANNEL-ONLY STATE
 * Shown publicly when latest-videos.json has `channel_handle` but an empty
 * `videos` array. Renders a 2-column split, channel hero on the left, a
 * small "what you'll find" rail on the right, so the section reads as a
 * deliberate micro-reel page, not a lonely single card. Real content only;
 * no fake video thumbnails. Flips to the 3-card grid automatically when
 * videos get written to the JSON.
 */
.ffh-videos--channel-only {
  background: var(--ff-sand-alt);
}

.ffh-channel-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.ffh-channel-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 32px 36px;
  background: linear-gradient(135deg, #0f2942 0%, #0a4d66 100%);
  color: var(--ff-white);
  text-decoration: none;
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-deep);
  transition: transform var(--ff-ease-normal), box-shadow var(--ff-ease-normal);
}
.ffh-channel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 41, 66, 0.35);
  color: var(--ff-white);
}
.ffh-channel-card__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ff-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.ffh-channel-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ffh-channel-card__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--ff-teal);
}
.ffh-channel-card__title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ffh-channel-card__sub {
  font-size: 15px;
  color: rgba(190, 233, 255, 0.92);
  line-height: 1.55;
  margin-top: 4px;
}
.ffh-channel-card__arrow {
  font-size: 28px;
  color: var(--ff-teal);
  flex-shrink: 0;
  transition: transform var(--ff-ease-fast);
}
.ffh-channel-card:hover .ffh-channel-card__arrow {
  transform: translateX(4px);
}

/* Topic rail, the right column. Looks like an editorial list of categories,
   not a fake video grid. */
.ffh-channel-topics {
  padding: 28px 32px;
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ffh-channel-topics__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ff-coral);
  margin: 0;
}
.ffh-channel-topics ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ff-navy);
}
.ffh-channel-topics li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ffh-channel-topics__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.ffh-channel-topics__dot--coral { background: var(--ff-coral); }
.ffh-channel-topics__dot--teal  { background: var(--ff-teal-dark); }
.ffh-channel-topics__dot--blue  { background: var(--ff-ocean); }

@media (max-width: 768px) {
  .ffh-channel-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ffh-channel-card { padding: 24px 28px; gap: 20px; }
  .ffh-channel-card__title { font-size: 22px; }
}
@media (max-width: 480px) {
  .ffh-channel-card {
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 20px 22px;
  }
  .ffh-channel-card__arrow { display: none; }
  .ffh-channel-card__play { width: 56px; height: 56px; }
  .ffh-channel-card__title { font-size: 20px; }
  .ffh-channel-topics { padding: 22px 24px; }
}


/* ═══════════════════════════════════════════════
   GUIDES & TIPS
   ═══════════════════════════════════════════════ */

.ffh-guides {
  padding: 80px 0;
}
.ffh-guides__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.ffh-guide-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}
.ffh-guide-card__image {
  position: relative;
  border-radius: var(--ff-radius);
  overflow: hidden;
  height: 230px;
}
.ffh-guide-card__placeholder {
  width: 100%;
  height: 100%;
  background: var(--ff-sand-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ff-muted);
  font-size: 14px;
}
.ffh-guide-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ff-ease-normal);
}
.ffh-guide-card:hover .ffh-guide-card__image img {
  transform: scale(1.05);
}
.ffh-guide-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,28,23,0.6) 0%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
}
.ffh-guide-card__tag {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: white;
  padding: 2.5px 12px;
  border-radius: var(--ff-radius-pill);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Guide-card tag color variants, replace the three inline
 * `style="background:var(--ff-overlay-tag-*)"` attributes that were
 * decorating the Master Your Journey cards. Variants map 1:1 to the
 * existing overlay tokens so the visual is unchanged; markup gets
 * cleaner and future palette tweaks are one CSS edit. */
.ffh-guide-card__tag--ocean  { background: var(--ff-overlay-tag-ocean); }
.ffh-guide-card__tag--coral  { background: var(--ff-overlay-tag-coral); }
.ffh-guide-card__tag--teal   { background: var(--ff-overlay-tag-teal); }
.ffh-guide-card h3 {
  font-size: 24px;
  line-height: 32px;
  color: var(--ff-navy);
  margin: 12px 0 0;
}
.ffh-guide-card p {
  font-size: 16px;
  line-height: 24px;
  color: var(--ff-muted);
  margin: 0;
}


/* ═══════════════════════════════════════════════
   UPDATES + ESSENTIALS (DUAL COLUMN)
   ═══════════════════════════════════════════════ */

.ffh-updates {
  background: rgba(247,243,235,0.5);
  padding: 80px 0;
}
.ffh-updates__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
}

/* Articles column */
.ffh-updates__articles h2 {
  font-size: 30px;
  line-height: 36px;
  color: var(--ff-ocean);
  margin: 0 0 40px;
}
.ffh-article {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 32px;
}
.ffh-article:last-child { margin-bottom: 0; }
.ffh-article__thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--ff-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #f1ede5;
}
.ffh-article__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ffh-article__thumb-placeholder { width: 100%; height: 100%; background: #f1ede5; }
.ffh-article__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ffh-article__body h4 {
  font-size: 20px;
  line-height: 28px;
  color: var(--ff-navy);
  margin: 0;
}
.ffh-article__body p {
  /* 2026-04-23 accessibility pass: 14 → 15 px, lh 20 → 22 px. Latest-Updates
   * article excerpt needs to be comfortably readable at the 96×96 thumb
   * scale, 14/20 was too cramped on mobile. */
  font-size: 15px;
  line-height: 22px;
  color: var(--ff-muted);
  margin: 0;
  padding-top: 4px;
}

/* Essentials card */
.ffh-essentials-card {
  background: var(--ff-white);
  border-radius: var(--ff-radius);
  padding: 40px;
  box-shadow: var(--ff-shadow-card);
  display: flex;
  flex-direction: column;
  /* space-between distributes h2 / products / button across the card's
     full height so the right column stays visually balanced against the
     left column (Latest Updates) regardless of how many article cards
     are in the left column. Gap is still defined as a minimum rhythm. */
  justify-content: space-between;
  gap: 32px;
}
.ffh-essentials-card h2 {
  font-size: 24px;
  line-height: 32px;
  color: var(--ff-ocean);
  margin: 0;
}
.ffh-essentials-card__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ffh-product { text-align: center; }
.ffh-product__image-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--ff-sand-alt);
  border-radius: var(--ff-radius);
  margin-bottom: 16px;
}
.ffh-product__name {
  display: block;
  /* 2026-04-23 accessibility pass: 12 → 13 px. Product tile display name. */
  font-size: 13px;
  line-height: 1.4;
  color: var(--ff-muted);
}
.ffh-product__tag {
  display: block;
  font-size: 10px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--ff-ocean);
}


/* ═══════════════════════════════════════════════
   CREATORS
   ═══════════════════════════════════════════════ */

.ffh-creators {
  padding: 80px 0;
}
.ffh-creators__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ff-ocean);
  border-radius: var(--ff-radius);
  overflow: hidden;
  box-shadow: var(--ff-shadow-deep);
  min-height: 400px;
}
/*
 * Creator photo, "slightly crooked, settles on hover" interaction.
 * The photo lives inside a padded cell so the rotation doesn't get
 * clipped by the card's overflow:hidden. The cell is the hover target;
 * the inner element rotates.
 */
.ffh-creators__photo {
  position: relative;
  padding: 40px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ffh-creators__photo img,
.ffh-creators__photo-placeholder {
  display: block;
  width: 100%;
  /* Square slot, aspect-ratio:1/1 locks height from width so the photo
     is a true 1:1 at every breakpoint. Previous `height:100%` +
     `min-height:320px` pattern had no declared ratio; the cell's shape
     was accidental, driven by the grid's equal-height stretching. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--ff-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  transform: rotate(-3deg);
  transform-origin: center;
  transition: transform 450ms cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}
.ffh-creators__photo:hover img,
.ffh-creators__photo:hover .ffh-creators__photo-placeholder {
  transform: rotate(-0.5deg);
}
.ffh-creators__photo-placeholder {
  background: #005568;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .ffh-creators__photo img,
  .ffh-creators__photo-placeholder,
  .ffh-creators__photo:hover img,
  .ffh-creators__photo:hover .ffh-creators__photo-placeholder {
    transform: rotate(0deg);
    transition: none;
  }
}
.ffh-creators__body {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.ffh-creators__body .ffh-badge { margin-bottom: 24px; }
.ffh-creators__body h2 {
  font-size: 36px;
  line-height: 45px;
  color: #f8fcff;
  margin: 0 0 32px;
}
.ffh-creators__body p {
  font-size: 18px;
  line-height: 29.25px;
  color: #bee9ff;
  margin: 0 0 32px;
}
.ffh-creators__social {
  display: flex;
  /* Tightened gap 16 → 12 so the 5-6 platform row stays elegant on the
   * creators card without pushing the last icon past the body column's
   * right edge at 1024-px viewports. Mobile override wraps if needed. */
  gap: 12px;
  flex-wrap: wrap;
}
.ffh-social-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(190,233,255,0.3);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* `color` drives `currentColor` in the inline SVG icons, brighten on
   * hover without repainting six separate fill/stroke attributes. */
  color: #bee9ff;
  transition: background var(--ff-ease-fast), color var(--ff-ease-fast), border-color var(--ff-ease-fast);
}
.ffh-social-icon:hover {
  background: rgba(190,233,255,0.15);
  color: #ffffff;
  border-color: rgba(190,233,255,0.55);
}
.ffh-social-icon:focus-visible {
  outline: 2px solid #bee9ff;
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════ */

.ffh-newsletter {
  background: var(--ff-sand);
  padding: 80px var(--ff-page-padding);
  text-align: center;
}
.ffh-newsletter__inner {
  max-width: 672px;
  margin: 0 auto;
}
.ffh-newsletter__icon {
  margin-bottom: 16px;
}
.ffh-newsletter h2 {
  font-size: 36px;
  line-height: 40px;
  color: var(--ff-ocean);
  letter-spacing: -0.9px;
  margin: 8px 0 16px;
}
.ffh-newsletter > .ffh-newsletter__inner > p {
  font-size: 18px;
  line-height: 28px;
  color: var(--ff-muted);
  margin: 0;
}
.ffh-newsletter__form {
  display: flex;
  gap: 16px;
  margin-top: 48px;
}

/* Launch-offline CTA row used in place of the (temporarily removed) signup
 * form, YouTube follow + mailto notify-me. Same horizontal rhythm as the
 * form would have had, so swapping back to the real form later leaves the
 * section's vertical rhythm untouched. Stacks on mobile via the existing
 * `.ffh-newsletter__form` media query fall-through (see 480px block). */
.ffh-newsletter__actions {
  display: flex;
  gap: 16px;
  margin-top: 48px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .ffh-newsletter__actions {
    flex-direction: column;
    align-items: stretch;
  }
}
.ffh-newsletter__input {
  flex: 1;
  font-family: var(--wp--preset--font-family--primary);
  font-size: 16px;
  padding: 17px 32px;
  border-radius: var(--ff-radius-pill);
  border: none;
  background: #f1ede5;
  color: var(--ff-navy);
  box-shadow: inset 0px 2px 4px rgba(0,0,0,0.05);
  outline: none;
}
.ffh-newsletter__input::placeholder { color: #6b7280; }
.ffh-newsletter__input:focus { box-shadow: inset 0px 2px 4px rgba(0,0,0,0.05), 0 0 0 2px var(--ff-ocean); }
.ffh-newsletter__disclaimer {
  /* 2026-04-23 accessibility pass: 12 → 13 px, lh 16 → 18 px, opacity
   * 0.7 → 0.85. 12px at 0.7 opacity was legal-boilerplate territory, 
   * lifted so older readers can actually read it on a sand background. */
  font-size: 13px;
  line-height: 18px;
  color: var(--ff-muted);
  opacity: 0.85;
  margin-top: 16px;
}


/* ═══════════════════════════════════════════════
   RESPONSIVE, 768px
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ffh-container { padding: 0 24px; }
  .ffh-hero { padding: 96px 24px 48px; }
  .ffh-hero__inner { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
  .ffh-hero__text { align-items: center; text-align: center; }
  .ffh-hero__text > p { max-width: none; }
  .ffh-hero__buttons { justify-content: center; flex-wrap: wrap; }

  /* 2026-04-23 mobile-polish pass, final premium fix.
   * Was: `.ffh-hero__image { display: none }`, hid the creators
   * photo on mobile/tablet. For a creator-led brand, hiding the
   * brand-anchor photo on the dominant viewport (mobile traffic) is
   * a regression. Reveal the photo as a centered card BELOW the
   * text+buttons (CSS-grid source order does this without `order`
   * overrides), constrained to 320 px max-width so the section
   * doesn't become billboard-tall, with a softened 1.5° tilt that
   * reads as "personality" not "off-axis" at smaller scale. */
  .ffh-hero__image {
    max-width: 320px;
    width: 100%;
    margin-inline: auto;
  }
  .ffh-hero__image-frame {
    transform: rotate(1.5deg);
  }
  .ffh-hero__image-frame:hover {
    transform: rotate(0.25deg);
  }
  /* Decorative orbs read as visual noise at mobile scale and the
   * blue orb's `right: -40px` offset risks horizontal overflow on
   * narrow phones (the parent `.ffh-hero { overflow: hidden }`
   * clips it, but suppressing entirely is cleaner). Hidden under
   * 768 px so the photo card reads as the single focal element. */
  .ffh-hero__orb--teal,
  .ffh-hero__orb--blue {
    display: none;
  }

  .ffh-tools__grid { grid-template-columns: 1fr; }
  .ffh-guides__grid { grid-template-columns: 1fr; }
  .ffh-videos { padding: 64px 0; }
  .ffh-videos__grid,
  .ffh-videos__grid--1,
  .ffh-videos__grid--2 { grid-template-columns: 1fr; gap: 24px; }
  .ffh-section-header--split { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ffh-section-header--split h2 { font-size: 36px; line-height: 40px; }

  .ffh-updates__grid { grid-template-columns: 1fr; }

  .ffh-creators__card { grid-template-columns: 1fr; }
  .ffh-creators__photo { padding: 32px 24px; }
  /* Square aspect-ratio drives mobile height directly, no explicit
     max/min-height override needed. At ≤480px the card is ~448 wide
     minus 48px horizontal padding → ~400 × 400 square. */
  .ffh-creators__body { padding: 48px 32px; }

  .ffh-newsletter__form { flex-direction: column; }
  .ffh-btn { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE, 480px
   ═══════════════════════════════════════════════ */

@media (max-width: 480px) {
  .ffh-hero { padding: 80px 16px 32px; }
  .ffh-hero__text h1 { font-size: 2.25rem; }
  /* 2026-04-23 accessibility pass: mobile hero deck 16 → 17 px. Keeps
   * the hero paragraph at the same comfort level as body elsewhere. */
  .ffh-hero__text > p { font-size: 17px; line-height: 1.6; }
  /* 2026-04-23 mobile-polish pass: tighter photo card on small phones
   * (375/430 px viewports). 320 → 280 keeps the hero from feeling
   * dominated by the photo on narrow screens, at 4:5 aspect that's
   * ~280×350 px, comfortably above the fold without crowding. */
  .ffh-hero__image { max-width: 280px; }
  /* Tighten the gap between the text+buttons block and the photo on
   * very small phones, 48 px reads as a chasm at viewport heights
   * around 700 px tall (iPhone SE / Mini); 32 px keeps the photo
   * close enough to the buttons to read as a unit. */
  .ffh-hero__inner { gap: 32px; }

  .ffh-tools, .ffh-guides, .ffh-updates, .ffh-creators, .ffh-newsletter { padding: 64px 0; }
  .ffh-container { padding: 0 16px; }
  .ffh-newsletter { padding: 64px 16px; }

  .ffh-section-header { margin-bottom: 40px; }
  .ffh-section-header h2 { font-size: 28px; }

  .ffh-tool-card { padding: 24px; }
  .ffh-essentials-card { padding: 24px; }
  .ffh-essentials-card__products { grid-template-columns: 1fr; }
  .ffh-creators__body { padding: 32px 24px; }
  .ffh-creators__body h2 { font-size: 28px; line-height: 36px; }
}


/* ═══════════════════════════════════════════════
   HOMEPAGE CARD WIRING (2026-04-22)
   When the Master-Your-Journey guide cards, Latest-Updates article
   cards, and Cruise-Essentials product tiles became real clickable
   destinations, the existing .ffh-guide-card / .ffh-article /
   .ffh-product styles got helper rules: anchor-wrapped cards inherit
   color + suppress underline; illustrations fill the placeholder
   area; emoji thumbnails render centered at card sizes.
   ═══════════════════════════════════════════════ */

/* Anchor-wrapped cards inherit color and suppress underline */
a.ffh-guide-card,
a.ffh-article {
  text-decoration: none;
  color: inherit;
}

/* Guide-card illustration fills the 230 px image container */
.ffh-guide-card__placeholder {
  position: relative;
  overflow: hidden;
}

.ffh-guide-card__illus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Per-guide themed backgrounds behind the illustration.
   Illustrations use currentColor so `color` tints the SVG. */
.ffh-guide-card__placeholder--sun {
  background: linear-gradient(135deg, #fde9b3 0%, #fdf9f1 100%);
  color: #c48b1d;
}

.ffh-guide-card__placeholder--ship {
  background: linear-gradient(135deg, #bee9ff 0%, #e9f6ff 100%);
  color: var(--ff-ocean);
}

.ffh-guide-card__placeholder--compass {
  background: linear-gradient(135deg, #98f0da 0%, #e4faf3 100%);
  color: var(--ff-teal-dark);
}

/* Latest Updates article thumbnail emoji */
.ffh-article__thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 44px;
  line-height: 1;
}

.ffh-article__thumb--packing { background: var(--ff-icon-bg-blue); }
.ffh-article__thumb--fees    { background: var(--ff-icon-bg-coral); }
.ffh-article__thumb--cabin   { background: var(--ff-icon-bg-teal); }

/* Cruise Essentials product tile emoji */
.ffh-product__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 56px;
  line-height: 1;
}

/* Anchor-wrapped product tiles, whole tile is clickable. Inherits tile
   padding + icon + text styles from the base .ffh-product class; this
   rule just neutralizes the anchor defaults (underline + inherited color)
   and adds a subtle lift on hover so the click affordance is obvious. */
a.ffh-product {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform var(--ff-ease-fast);
}

a.ffh-product:hover {
  transform: translateY(-2px);
}

a.ffh-product:hover .ffh-product__image-placeholder {
  background: var(--ff-icon-bg-blue);
}

a.ffh-product:hover .ffh-product__tag {
  color: var(--ff-coral);
}