/* ==========================================================================
   By Jillian Rose — My Favorites (curated recommendations page)
   Only loaded on the My Favorites product_cat archive (see functions.php).
   homepage.css (.home-section-title, .eyebrow), shop.css (.shop-category-tile),
   and single-post.css (.bjr-affiliate-bubble) are ALSO enqueued on this
   template — see page-templates/pcat-landing.php's bjr_myfavorites_render().
   Only existing design-system tokens used throughout — no new colors/
   fonts/spacing.
   ========================================================================== */

/* ---- 1. Hero ----
   Photo has a genuinely open center (verified against an actual rendered
   crop before sizing, not guessed) — plain object-position:center, no
   scrim needed, same "photo supplies its own contrast" approach used
   throughout the Shop category pages. */
.mf-hero { padding: 0; }
.mf-hero-media {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.mf-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  border-radius: 0;
}
.mf-hero-text-wrap { position: relative; z-index: 2; width: 100%; }
.mf-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}
/* Real script-graphic upload, sized by width (natural aspect preserved
   via height:auto) — fluid so it scales continuously with viewport
   width rather than jumping at a breakpoint; verified comfortably clear
   of the surrounding objects at 1024/1366/1920px against an actual
   rendered composite before choosing this range. */
.mf-hero-title-img { display: block; width: clamp(320px, 27vw, 520px); height: auto; margin: 0; }
.mf-hero-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 38ch;
  margin: 0;
}

/* ---- 2. Category grid ----
   Reuses .shop-category-tile / .shop-category-photo / .shop-category-info
   / .shop-category-label verbatim from shop.css — only new rule here is
   the --soon modifier for tiles with no real destination yet (all 6,
   today), which lives in THIS file specifically so shop.css and the
   Shop Hub's own tiles are never touched. Grid wrapper mirrors the
   established "wider container than the heading's own .wrap" pattern
   already used for Shop by Category / Shop Favorites on the Shop Hub. */
.mf-categories { padding: var(--space-5) 0 var(--space-4); }
.mf-categories-eyebrow { display: block; text-align: center; margin-bottom: var(--space-3); }
.mf-categories-grid-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}
.mf-categories-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
}
.shop-category-tile--soon { cursor: default; }
.shop-category-tile--soon:hover { opacity: 1; }

/* ---- Affiliate disclosure ----
   Slim contained bar (below Things I Buy Again & Again, matching the
   approved mockup's placement) — reused heart (#1524), real copy/link,
   a light warm-neutral background + thin border, deliberately not a
   "legal warning" look. */
.mf-disclosure-section { padding: 0 0 var(--space-5); }
.mf-disclosure-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}
.mf-disclosure-heart { width: 20px; height: auto; flex-shrink: 0; border-radius: 0; }
.mf-disclosure-bar p { font-size: 12.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.mf-disclosure-bar a { color: var(--color-accent-dark); }

/* ---- Shared: reusable recommendation-card system ----
   Used by Currently Loving and Things I Buy Again & Again. Deliberately
   simpler/more editorial than .card (the WooCommerce product card used
   elsewhere in the Shop): no price line, no Coming-Soon badge overlay,
   no eyebrow — just image, title, optional short description. These
   ARE the final card dimensions — only the placeholder image/label get
   replaced once real recommendations exist, per explicit instruction. */
.fav-rec-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}
.fav-rec-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fav-rec-thumb-wrap { width: 100%; }
.fav-rec-thumb,
.fav-rec-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  display: block;
  margin: 0;
}
/* Deliberately calmer than the WooCommerce Coming-Soon placeholder used
   elsewhere on the Shop (.shop-thumb-placeholder, shop.css) — a plain
   tinted box with a small subtle label, not a dashed border + icon. */
.fav-rec-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
}
.fav-rec-placeholder span {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 0 var(--space-1);
}
.fav-rec-body { padding: var(--space-2); text-align: center; }
.fav-rec-body h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}
.fav-rec-body p {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 4px 0 0;
}

/* ---- Shared heading-PNG sizing ----
   Every handwritten script heading on this page (Currently Loving,
   Around Our House) shares this one rule so they read as related in
   scale — width + max-width, natural aspect ratio preserved via
   height:auto, no fixed height. Shop My Amazon Favorites uses its own
   narrower .mf-amazon-heading-img instead because its real aspect
   ratio is different enough that the same width would have made it
   read noticeably larger/heavier than these two. */
.mf-heading-img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 0 6px; }
/* Shop My Amazon Favorites' own heading width — see the PHP comment on
   bjr_myfavorites_house_and_amazon() for why this graphic (a two-line,
   near-square ~1.5:1 PNG) needs a narrower width than .mf-heading-img
   to land at a comparable visual height/weight next to Around Our
   House's single-line ~2.7:1 heading. Sized up ~15% (150px -> 173px)
   and centered (margin: 0 auto) per explicit request — it read too
   small and left-biased within its centered text column. */
.mf-amazon-heading-img { display: block; width: 173px; max-width: 100%; height: auto; margin: 0 auto 4px; }

/* ---- Shared: editorial intro column + 5-card row ----
   Used by both Currently Loving and Things I Buy Again & Again — one
   narrow (~21%) intro column beside a wider row of 5 recommendation
   cards, matching the approved mockup's structure for both sections. */
.mf-rec-row {
  display: grid;
  grid-template-columns: 21% 1fr;
  gap: var(--space-4);
  align-items: start;
}
.mf-rec-intro { display: flex; flex-direction: column; align-items: flex-start; }
.mf-text-heading { margin: 0 0 6px; }

/* ---- 3. Currently Loving ---- */
.mf-currently-loving { padding: var(--space-5) 0; }
.mf-section-intro { font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); margin: 0 0 var(--space-2); }

/* ---- 4/5. Around Our House + Shop My Amazon Favorites ----
   Two equal-height editorial FEATURE panels — deliberately larger/more
   generous than the small .fav-rec-card component above, so neither
   reads as "another product card." Photo (House) / placeholder
   (Amazon) sit on the outer edge of each panel, text meeting in the
   middle where the two panels sit side by side. */
.mf-feature-row { padding: var(--space-5) 0; }
.mf-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
.mf-feature {
  display: flex;
  background: var(--color-bg-secondary);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
}
.mf-feature-photo {
  width: 42%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  flex-shrink: 0;
}
.mf-feature-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: var(--space-4);
}
.mf-feature-text p { font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); margin: 0 0 4px; max-width: 32ch; }
/* Amazon's text column reads as one centered vertical composition
   (PNG, copy, button) rather than left-aligned like House's — the two
   panels are intentionally NOT mirror images of each other here, per
   explicit request. */
.mf-feature--amazon .mf-feature-text { align-items: center; text-align: center; }
.mf-feature--amazon .mf-feature-text p { margin-left: auto; margin-right: auto; }
/* Button kept to one line rather than shrinking the font — reduced
   horizontal padding (site default is 25px/side) plus white-space:
   nowrap, so "SHOP AMAZON FAVORITES" always fits the available column
   width instead of wrapping. */
.mf-feature--amazon .mf-cta { white-space: nowrap; padding-left: 16px; padding-right: 16px; }
/* Neutral placeholder occupying roughly the same area the real Amazon
   package photo will eventually take up — same visual weight as
   .mf-feature-photo on the House panel, not empty space. */
.mf-feature-placeholder {
  width: 42%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
}
.mf-feature-placeholder span {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 0 var(--space-2);
}

/* ---- Shared CTA ----
   Inert by design on every callout that uses it — see the PHP comments
   on bjr_myfavorites_house_and_amazon() / bjr_myfavorites_seasonal()
   for exactly what each is still waiting on. .mf-callout-cta is kept
   as an alias — bjr_myfavorites_seasonal() (untouched this pass, per
   explicit "don't redesign it" instruction) still uses that original
   class name. */
.mf-cta, .mf-callout-cta { cursor: default; font-size: 12px; }

/* ---- 6. Things I Buy Again & Again ---- */
.mf-buy-again { padding: var(--space-5) 0; }

/* ---- 7. Seasonal Favorites ----
   Wider/shorter horizontal banner rather than a near-square photo
   column: the photo's own aspect ratio (~1.25:1) at a 50/50 split
   previously drove the whole row to ~440px tall, reading as oversized
   with empty space beside it. A fixed photo height (340px, not the
   image's own aspect) plus a 58/42 column split fixes both the
   proportions and the height in one change; the text column stretches
   to match via align-items:stretch + its own justify-content:center,
   so there's no leftover blank area under the button either.
   object-position:center top keeps the top of the tree in frame,
   letting any necessary crop come off the bottom of the photo instead. */
.mf-seasonal { padding: var(--space-5) 0 var(--space-6); }
.mf-seasonal-inner {
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
.mf-seasonal-photo {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  margin: 0;
  display: block;
}
.mf-seasonal-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.mf-seasonal-text .eyebrow { margin-bottom: 0; }
.mf-seasonal-text p { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 4px; max-width: 38ch; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .mf-hero-media { position: static; display: block; min-height: 0; overflow: visible; }
  .mf-hero-photo { position: static; width: 100%; height: 280px; object-position: center; border-radius: var(--radius); }
  .mf-hero-text-wrap { position: static; }
  .mf-hero-text { padding-top: var(--space-4); }
  .mf-hero-title-img { width: 80%; max-width: 360px; }

  .mf-categories-grid { grid-template-columns: repeat(3, 1fr); }

  .mf-rec-row { grid-template-columns: 1fr; }
  .mf-rec-intro { align-items: center; text-align: center; margin-bottom: var(--space-2); }
  .fav-rec-grid { grid-template-columns: repeat(3, 1fr); }

  .mf-feature-grid { grid-template-columns: 1fr; }
  .mf-feature { flex-direction: column; min-height: 0; }
  .mf-feature-photo { width: 100%; height: 220px; }
  .mf-feature-placeholder { width: 100%; min-height: 160px; }
  .mf-feature-text { align-items: center; text-align: center; }
  .mf-feature-text p { margin-left: auto; margin-right: auto; }

  .mf-seasonal-inner { grid-template-columns: 1fr; }
  .mf-seasonal-photo { height: 240px; object-position: center top; }
  .mf-seasonal-text { align-items: center; text-align: center; }
  .mf-seasonal-text p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 680px) {
  .mf-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .fav-rec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* 2 columns rather than 1 for the 5-card rows — 5 full-width stacked
     cards read as excessive on a phone; a 2-2-1 grid stays compact. */
  .fav-rec-grid { grid-template-columns: repeat(2, 1fr); }
}