/* Product category landing pages (route-product-category.php). Colours, radii
   and spacing come from tokens.css and the shared primitives from layout.css;
   only this template's own layout lives here. The hero holds the one photograph
   position: a real attachment where the media library has one (Small Branded
   Merchandise), otherwise the shared .media-slot tint carrying the labelled
   placeholder from inc/placeholders.php. No stock imagery is referenced. */

.category-page{padding-block:0}

/* ---------- Hero: the category line, the note and the photograph ---------- */
.category-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:var(--space-lg) var(--space-xl)}
.category-hero__body{min-width:0}
.category-hero__head{margin-bottom:0}
.category-hero__lead{margin-top:20px;max-width:560px;font-family:var(--font-display);font-size:1.06rem;font-weight:600;line-height:1.45;letter-spacing:-.015em}
.category-hero__intro{margin-top:14px;max-width:560px;font-size:.94rem;color:var(--muted)}
.category-hero__source{margin-top:24px;padding-top:18px;max-width:560px;border-top:1px solid var(--line);font-family:var(--font-display);font-size:.86rem;font-weight:700;line-height:1.5;color:var(--muted)}
.category-hero__media{min-width:0}
.category-hero__slot{aspect-ratio:4/3;box-shadow:0 22px 44px rgb(76 55 39 / 12%)}

/* ---------- Directions: one category, several ways in ---------- */
.category-chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.category-chip{min-width:0;padding:11px 20px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-family:var(--font-display);font-size:.86rem;font-weight:700}
.category-directions__note{margin:24px 0 0;max-width:640px;font-size:.92rem;color:var(--muted)}

.category-direction-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0}
.category-direction{display:flex;flex-direction:column;gap:10px;min-width:0;height:100%;padding:24px 22px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.category-direction__title{font-size:1.08rem}
.category-direction__title a:hover{color:var(--clay)}
.category-direction__note{margin:0;font-size:.84rem;line-height:1.5;color:var(--muted)}
.category-direction__sublist{list-style:none;display:grid;gap:7px;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft);font-size:.82rem;line-height:1.45;color:var(--muted)}
.category-direction__sublist li{min-width:0}
.category-direction__subitem a{display:inline-block}
.category-direction__subitem a:hover{color:var(--clay)}

/* ---------- Products ---------- */
.category-products__pending{margin:0;max-width:660px;padding:var(--space-lg);background:var(--white);border:1px dashed var(--line);border-left:3px solid var(--clay);border-radius:var(--radius-control);font-size:.92rem;color:var(--muted)}


/* ---------- How it works for this category ---------- */
.category-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px;margin:0;padding:0}
.category-step{min-width:0;padding-top:20px;border-top:1px solid var(--line)}
.category-step__no{margin:0;font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--clay)}
.category-step__title{margin-top:14px;font-size:1.14rem}
.category-step__text{margin-top:10px;font-size:.92rem;color:var(--muted)}

/* ---------- Projects this range suits ---------- */
.category-related__groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.category-related__group{min-width:0;padding:24px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.category-related__label{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.category-related__list{list-style:none;display:grid;gap:12px;margin:18px 0 0;padding:0}
.category-related__item{min-width:0}
.category-related__link{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);font-family:var(--font-display);font-size:.98rem;font-weight:700;line-height:1.35}
.category-related__item:last-child .category-related__link{padding-bottom:0;border-bottom:0}
.category-related__link:hover{color:var(--clay)}
.category-related__link .arrow{flex:none;color:var(--clay)}
.category-related__link-title{min-width:0}

/* ---------- Closing call to action ---------- */
.category-cta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.category-cta__body{max-width:620px}
.category-cta__text{margin-top:14px;color:var(--muted)}
.category-cta__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Narrow screens ---------- */
@media (max-width:900px){
  .category-hero{grid-template-columns:1fr;gap:32px;padding-block:var(--space-md) var(--space-lg)}
  .category-hero__slot{aspect-ratio:16/10}
  .category-direction-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-steps{grid-template-columns:1fr;gap:24px}
  .category-related__groups{grid-template-columns:1fr}
    .category-cta__inner{align-items:flex-start;flex-direction:column;gap:var(--space-md)}
}
@media (max-width:560px){
  .category-hero__lead{font-size:1rem}
  .category-chip-list{gap:9px}
  .category-chip{padding:9px 15px;font-size:.82rem}
  .category-direction-list{grid-template-columns:1fr;gap:16px}
  .category-cta__actions{width:100%}
  .category-cta__actions .btn{flex:1 1 auto}
}