/* ==========================================================================
   By Jillian Rose — Category Landing (Printables & Downloads and future
   category landing pages)
   Only loaded on configured product_cat landing views (see functions.php:
   bjr_pcat_landing_config() slugs). shop.css and homepage.css are ALSO
   enqueued on this template — shop.css for the product-card typography/
   Coming Soon badge components (.card, .shop-card-thumb-wrap, .shop-
   card-price, .shop-coming-soon-badge), homepage.css for the .topic-tile-
   icon-badge circle reused by the subcategory nav. Only existing
   design-system tokens used throughout — no new colors/fonts/spacing.
   ========================================================================== */

/* ---- 1. Hero ----
   Composition (negative space left, styled scene right) is baked into
   the uploaded photo itself — no CSS gradient scrim added on top of it,
   unlike the Shop Hub hero. */
.pcat-hero { padding: 0; }
.pcat-hero-media {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pcat-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  margin: 0;
  border-radius: 0;
}
.pcat-hero-text-wrap { position: relative; z-index: 2; width: 100%; }
.pcat-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 440px;
}
/* Mirrors the hero for categories whose photo has its composition on
   the left / clear space on the right (e.g. BJR Kids) instead of the
   default left-text/right-scene arrangement — same photo-supplies-the-
   composition technique, just flipped which side each half lives on.
   Internal text alignment stays left-aligned either way (only the
   column's own position flips), and this only applies at the desktop
   overlay breakpoint — mobile already stacks/centers regardless. */
.pcat-hero--reverse .pcat-hero-photo { object-position: left center; }
.pcat-hero--reverse .pcat-hero-text { margin-left: auto; }
.pcat-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;
}
.pcat-hero-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 38ch;
  margin: 0;
}

/* ---- 2. Subcategory nav ----
   .topic-tile-icon-badge is the exact homepage circle-badge component
   (homepage.css) — no second badge built here. */
.pcat-subnav { padding: var(--space-1) 0 var(--space-5); }
/* BJR Kids only — its hero photo's composition sits closer to the
   photo's own bottom edge than Printables & Downloads', so the shared
   8px top padding read as crowded specifically on this page. Scoped to
   the real body class WooCommerce already adds for this term archive
   (term-bjr-kids) rather than editing the shared .pcat-subnav rule
   above, which would also shift Printables & Downloads' own already-
   approved top spacing. Bottom padding, hero height, and everything
   inside the icon row are untouched. */
body.term-bjr-kids .pcat-subnav,
body.term-home-organization .pcat-subnav,
body.term-blogging-business .pcat-subnav { padding-top: var(--space-4); }
.pcat-subnav-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
.pcat-subnav-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  text-decoration: none;
}
.pcat-subnav-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .03em;
  line-height: 1.3;
  color: var(--color-text);
}
a.pcat-subnav-tile:hover .pcat-subnav-label { color: var(--color-accent-dark); }
a.pcat-subnav-tile:hover .topic-tile-icon-badge { border-color: var(--color-accent-dark); }
/* Display-only tiles (BJR Kids: not clickable, no taxonomy/filter wired
   up yet) — plain <div> tiles, deliberately no hover state so they
   don't visually imply interactivity that doesn't exist. */
.pcat-subnav-tile--static { cursor: default; }

/* ---- 3/4/5. Content layout: sidebar (left) + main (right) ---- */
.pcat-content { padding: var(--space-2) 0 var(--space-5); }
.pcat-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.pcat-sidebar { display: flex; flex-direction: column; gap: var(--space-3); }
.pcat-sidebar-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.pcat-sidebar-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}
.pcat-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pcat-filter-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--color-text);
  text-decoration: none;
}
.pcat-filter-link:hover { color: var(--color-accent-dark); }
.pcat-filter-link.is-active { color: var(--color-text); font-weight: 600; }
.pcat-filter-box {
  position: relative;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-interactive);
  border-radius: 3px;
  background: var(--color-white);
}
.pcat-filter-link.is-active .pcat-filter-box {
  background: var(--color-button-fill);
  border-color: var(--color-button-fill);
}
.pcat-filter-link.is-active .pcat-filter-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pcat-sidebar-newsletter {
  background: var(--color-bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.pcat-sidebar-newsletter-heart {
  width: 26px;
  height: auto;
  margin: 0 0 6px;
  border-radius: 0;
}
.pcat-sidebar-newsletter .eyebrow { margin-bottom: 0; }
.pcat-sidebar-newsletter p { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); text-wrap: balance; margin: 0; }
.pcat-sidebar-newsletter .btn-primary { font-size: 11px; margin-top: 4px; }

.pcat-main { min-width: 0; }
.pcat-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.pcat-showing { font-family: var(--font-sans); font-size: 13px; color: var(--color-text-secondary); margin: 0; }
.pcat-sort select {
  width: auto;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius);
}

.pcat-product-grid { gap: var(--space-3); }
@media (min-width: 901px) {
  .pcat-product-grid { grid-template-columns: repeat(4, 1fr); }
}

.pcat-empty { padding: var(--space-5) 0; text-align: center; color: var(--color-text-secondary); }

.pcat-main ul.page-numbers {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.pcat-main .page-numbers a,
.pcat-main .page-numbers span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.pcat-main .page-numbers a:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.pcat-main .page-numbers .current { background: var(--color-button-fill); border-color: var(--color-button-fill); color: var(--color-white); }
.pcat-main .page-numbers .dots { border: none; color: var(--color-text-secondary); }

/* ---- 6. Freebie / newsletter banner ----
   Same "photo supplies the composition, text overlays its real clear
   space" technique as the hero — photo's negative space is on the right
   this time, so the text column sits flush right within the wrap
   instead of flush left. */
.pcat-freebie-banner { padding: 0; }
/* Real <img> element (not a CSS background-image) laid out at its own
   natural aspect ratio rather than forced to fill the box via
   object-fit: width:100% scales it to the section's width, height:auto
   preserves its real 1683x935 proportions (no stretching), and
   position:absolute + left:0 + bottom:0 pins its bottom edge exactly to
   the section's bottom edge. Whatever height that produces beyond the
   380px box (the photo's blank upper wall) simply extends upward and
   is clipped by this wrapper's own overflow:hidden — cropping always
   comes from the top, never the bottom, so the pot and candle bases are
   never in question. */
.pcat-freebie-banner-media {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pcat-freebie-banner-photo {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 0;
}
/* BJR Kids only, desktop only (matches mobile's existing breakpoint
   boundary — see @media (max-width:900px) below, left untouched).
   Full rework per explicit request: the photo itself IS the banner, no
   separate background panel and no fixed-height crop box. Reverted
   from the shared absolute-positioned/cropped technique above back to
   a normal in-flow image (width:100%; height:auto at its real 2:1
   aspect — the same natural-fit approach the mobile layout already
   uses), so the section's own height is entirely driven by the real
   photo — never cropped, never distorted, never padded with an
   artificial fill color. Constrained to the site's standard 1140px
   container (not full viewport-bleed) so the natural height stays a
   sane "banner" proportion rather than growing enormous on very wide
   monitors, with the same rounded-corner treatment other contained
   elements on the site use. Text overlays on top via its own
   absolutely-positioned layer, sitting over the photo's real fade
   toward the right. */
@media (min-width: 901px) {
  body.term-bjr-kids .pcat-freebie-banner-media,
  body.term-home-organization .pcat-freebie-banner-media,
  body.term-blogging-business .pcat-freebie-banner-media {
    max-width: var(--container-width);
    margin: 0 auto;
    min-height: 0;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
  }
  body.term-bjr-kids .pcat-freebie-banner-photo,
  body.term-home-organization .pcat-freebie-banner-photo,
  body.term-blogging-business .pcat-freebie-banner-photo {
    position: static;
    width: 100%;
    height: auto;
  }
  body.term-bjr-kids .pcat-freebie-banner-text-wrap,
  body.term-home-organization .pcat-freebie-banner-text-wrap,
  body.term-blogging-business .pcat-freebie-banner-text-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
  }
}

.pcat-freebie-banner-text-wrap { position: relative; z-index: 2; width: 100%; }
.pcat-freebie-banner-text {
  margin-left: auto;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-1);
}
.pcat-freebie-banner-text .eyebrow { margin-bottom: 0; }
.pcat-freebie-banner-text h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--color-text);
  margin: 0;
}
.pcat-freebie-banner-text > p { color: var(--color-text-secondary); margin: 0 0 var(--space-2); }
.pcat-freebie-form { display: flex; gap: var(--space-2); align-items: flex-start; width: 100%; max-width: 440px; }
.pcat-freebie-form .field { flex: 1; margin-bottom: 0; text-align: left; }
.pcat-freebie-form label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.pcat-freebie-form button { white-space: nowrap; }

/* ---- 7. Trust bar ---- */
.pcat-trust-bar { padding: var(--space-5) 0; }
.pcat-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.pcat-trust-item { display: flex; align-items: flex-start; gap: var(--space-2); }
.pcat-trust-item .icon { width: 22px; height: 22px; color: var(--color-accent-dark); flex-shrink: 0; margin-top: 2px; }
.pcat-trust-item h4 { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--color-text); margin: 0 0 2px; }
.pcat-trust-item p { font-size: 12.5px; line-height: 1.4; color: var(--color-text-secondary); margin: 0; }

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

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

  .pcat-layout { grid-template-columns: 1fr; }
  .pcat-sidebar { order: 2; }
  .pcat-main { order: 1; }

  /* Mobile stays a plain stacked layout (image, then text, in normal
     flow) rather than the desktop overlay — a hard-clipped fixed-height
     image wrapper here would clip the text/form below it, since they're
     nested inside the same element in the markup, not siblings. No
     cropping needed on mobile anyway: at a narrow column width the
     photo's natural aspect ratio (width:100%; height:auto, overriding
     the base rule's position:absolute/bottom:0) renders the ENTIRE
     photo undistorted, so the pot/candle question doesn't arise here. */
  .pcat-freebie-banner-media { position: static; display: block; min-height: 0; overflow: visible; }
  .pcat-freebie-banner-photo { position: static; width: 100%; height: auto; border-radius: var(--radius); }
  .pcat-freebie-banner-text-wrap { position: static; }
  .pcat-freebie-banner-text { margin: var(--space-3) auto 0; max-width: 100%; align-items: center; text-align: center; }
  .pcat-freebie-form { flex-direction: column; }
  .pcat-freebie-form button { width: 100%; justify-content: center; }

  .pcat-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .pcat-subnav-grid { grid-template-columns: repeat(2, 1fr); }
  .pcat-feed-head { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}
@media (max-width: 560px) {
  .pcat-trust-grid { grid-template-columns: 1fr; }
}