/* ==========================================================================
   By Jillian Rose — Giftable Finds (editorial gift-discovery landing page)
   Only loaded on the Giftable Finds product_cat archive (see functions.php).
   homepage.css (icon-badge), shop.css (card/Coming-Soon-badge components),
   and pcat-landing.css (.pcat-trust-bar/.pcat-empty, reused verbatim) are
   ALSO enqueued on this template — see page-templates/pcat-landing.php's
   bjr_giftable_finds_render(). Only existing design-system tokens used
   throughout — no new colors/fonts/spacing.
   ========================================================================== */

/* ---- 1. Hero ----
   Image and crop are untouched — object-position stays biased slightly
   left (25% center) purely as a safety net for the narrow band of
   viewport widths right above the mobile breakpoint where a little
   horizontal cropping can occur; otherwise this is a pure text-
   positioning fix. The photo's own real composition (greenery far
   left, gift bag/decor far right, objects concentrated along the
   bottom, a large clean wall across the upper-middle) already gives
   enough contrast for dark text with no scrim needed, so the gradient
   from the previous pass is removed rather than kept or replaced — it
   existed to mute clutter under a right-aligned text block that no
   longer sits there. Text now sits in that real upper-middle open
   space instead: .gf-hero-media aligns its content to the top
   (align-items:flex-start) and .gf-hero-text-wrap adds a fixed top
   offset (a design-system space token, not an arbitrary number) to
   land the block roughly a third of the way down the hero's fixed
   480px height — reliable at every viewport from 901px up, since the
   hero's height doesn't change with width. Horizontal centering comes
   from the standard .wrap container plus text-align/align-items:center
   on .gf-hero-text itself, so it's centered across the full hero width
   at any viewport, not pinned to one side. */
.gf-hero { padding: 0; }
.gf-hero-media {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.gf-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  display: block;
  margin: 0;
  border-radius: 0;
}
.gf-hero-text-wrap { position: relative; z-index: 2; width: 100%; padding-top: var(--space-4); }
.gf-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.gf-hero-title-row { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.gf-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.1;
  color: var(--color-text);
  margin: 0;
}
.gf-hero-heart { width: 28px; height: auto; margin: 0; border-radius: 0; flex-shrink: 0; }
/* v2 tagline (attachment #1619) — fluid vw-based width rather than a
   fixed px value, so it scales continuously across desktop/tablet
   widths instead of jumping at a breakpoint. Tuned against actual
   rendered composites at 1024/1280/1366/1440/1920px (not guessed): an
   initial 27vw/500px pass measured comfortably at 1920px but ran the
   tagline's lower-right corner right up against the mug/koala at the
   very common 1366-1440px laptop range, so this is deliberately more
   conservative — 23vw/470px still reads as a real, noticeable increase
   over the original single-line PNG's fixed 340px at any width, while
   keeping a real safety margin against the gift box/mug at the sizes
   people actually use, not just the largest monitors. 300px floor
   matches roughly where the old version sat, so it's never smaller. */
.gf-hero-desc-img { display: block; width: clamp(300px, 23vw, 470px); height: auto; margin: 0; }

/* ---- 2. Four-value strip ----
   Deliberately NOT the circular icon-badge component used elsewhere —
   plain line icons with thin vertical dividers between columns instead,
   per explicit request to feel distinct from the other category pages. */
.gf-value-strip { padding: var(--space-4) 0 var(--space-5); }
.gf-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.gf-value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--color-border);
}
.gf-value-item:first-child { border-left: none; }
.gf-value-icon { width: 26px; height: 26px; color: var(--color-accent-dark); margin-bottom: 4px; }
.gf-value-item h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}
.gf-value-item p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---- Shared section head — reused pattern across sections 3-5 (same
   "flanking 1fr tracks keep the title centered regardless of trailing
   content" logic as .shop-section-head, just with no trailing link
   here — kept as its own class since the eyebrow sits above the title
   in this treatment, .shop-section-head doesn't have one). ---- */
.gf-section-head { text-align: center; margin-bottom: var(--space-4); }
.gf-section-head .eyebrow { display: block; }
.gf-section-head .home-section-title { margin: 4px 0 0; }

/* ---- 3. Gift discovery tiles ---- */
.gf-discovery { padding: var(--space-5) 0; }
.gf-discovery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3) var(--space-2);
}
.gf-discovery-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  text-decoration: none;
}
.gf-discovery-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .03em;
  line-height: 1.3;
  color: var(--color-text);
}
a.gf-discovery-tile:hover .gf-discovery-label { color: var(--color-accent-dark); }
a.gf-discovery-tile:hover .topic-tile-icon-badge { border-color: var(--color-accent-dark); }
.gf-discovery-tile--soon { cursor: default; opacity: .55; }
.gf-discovery-soon {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ---- 4. Featured Gift Guides ---- */
.gf-guides { padding: var(--space-5) 0; background: var(--color-bg-secondary); }
.gf-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.gf-guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  text-decoration: none;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  padding-bottom: var(--space-2);
}
.gf-guide-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; border-radius: 0; }
.gf-guide-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-text);
  padding: 0 var(--space-2);
}
.gf-guide-card .btn-tertiary { font-size: 11px; }
.gf-guides-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px dashed var(--color-border-interactive);
  border-radius: var(--radius);
}
.gf-guides-empty .icon { width: 24px; height: 24px; color: var(--color-accent-dark); }
.gf-guides-empty p { color: var(--color-text-secondary); margin: 0; }

/* ---- 5. Curated Finds — reuses .card / .card-grid verbatim (shop.css),
   same 4-column desktop behavior as .pcat-product-grid. ---- */
.gf-curated { padding: var(--space-5) 0; }
.gf-curated-grid { gap: var(--space-3); }
@media (min-width: 901px) {
  .gf-curated-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- 6. "Need a little more inspiration?" feature — compact editorial
   gift-guide strip: a narrow ~25% intro column (heading PNG + one line
   of support copy only — no eyebrow, no heart, no button, per explicit
   "keep this simple" direction) beside a ~75% row of three equal, flush
   -edged guide cards (photo + a centered translucent panel holding the
   title and an inert "Shop Guide" .btn-tertiary). Deliberately NOT the
   site's usual heavier .card treatment (shadow + rounded corners) —
   thin border + border-radius:0, the same restrained flush treatment
   already used for Shop by Category's tiles (.shop-category-tile,
   shop.css). Compact by design: no min-height floor, no tinted section
   background — the three photos themselves carry the visual weight. */
.gf-inspiration { padding: var(--space-5) 0; }
.gf-inspiration-inner {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-4);
  align-items: center;
}
.gf-inspiration-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
}
/* Reused hand-drawn heart (#1524, same asset used sitewide) — a
   decorative focal point centered above the left-aligned PNG/copy
   below it, not part of their left-aligned flow. align-self:center
   overrides the column's own flex-start just for this one child. Sized
   down from the first pass (32px) so it stays a small accent and
   doesn't compete with the now much larger two-line headline PNG. */
.gf-inspiration-heart { width: 24px; height: auto; margin: 0; border-radius: 0; align-self: center; }
/* v2 PNG (attachment #1618) is a real two-line graphic ("Need a little
   more" / "inspiration?"), replacing the single-line v1 — intentionally
   NOT pinned to v1's fixed 220px width. Sized as a percentage of the
   intro column itself (88%) rather than a fixed px value: since that
   column can never exceed roughly a quarter of the site's own 1140px
   .wrap, this scales the graphic to the largest size that still fits
   its column at any viewport, without an arbitrary width ceiling. */
.gf-inspiration-heading-img { display: block; width: 88%; height: auto; margin: 0; }
.gf-inspiration-copy { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }

.gf-inspiration-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.gf-guide-strip-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.gf-guide-strip-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.gf-guide-strip-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  background: rgba(247,245,242,.92);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-1);
  text-align: center;
}
.gf-guide-strip-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 4px;
}
/* Inert by design — no real Gift Guide pages exist yet for any of these
   three concepts, see the PHP comment on bjr_giftable_inspiration(). */
.gf-guide-strip-cta { cursor: default; font-size: 11px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .gf-hero-media { position: static; display: block; min-height: 0; overflow: visible; }
  .gf-hero-photo { position: static; width: 100%; height: 260px; object-position: center; border-radius: var(--radius); }
  .gf-hero-text-wrap { position: static; padding-top: 0; }
  .gf-hero-text { max-width: 100%; align-items: center; text-align: center; padding-top: var(--space-4); }
  .gf-hero-desc-img { width: 85%; max-width: 360px; margin: 0 auto; }

  .gf-value-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) 0; }
  .gf-value-item { border-left: none; border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-2) 0; }
  .gf-value-item:nth-child(1),
  .gf-value-item:nth-child(2) { border-top: none; padding-top: 0; }

  .gf-discovery-grid { grid-template-columns: repeat(3, 1fr); }
  .gf-guides-grid { grid-template-columns: repeat(2, 1fr); }

  .gf-inspiration-inner { grid-template-columns: 1fr; }
  .gf-inspiration-intro { align-items: center; text-align: center; }
  .gf-inspiration-cards { grid-template-columns: repeat(2, 1fr); }
  .gf-guide-strip-card:last-child { grid-column: 1 / -1; max-width: 340px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .gf-discovery-grid { grid-template-columns: repeat(2, 1fr); }
  .gf-inspiration-cards { grid-template-columns: 1fr; }
  .gf-guide-strip-card:last-child { max-width: 100%; }
}
@media (max-width: 560px) {
  .gf-value-grid { grid-template-columns: 1fr; }
  .gf-value-item { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
  .gf-value-item:first-child { border-top: none; padding-top: 0; }
  .gf-guides-grid { grid-template-columns: 1fr; }
}