/* ============================================================
   Sub-category details page
   (wp/gps-theme/template-parts/category-detail.php)

   The reference's page for one sub-category -- New MAN Trucks -- under a
   large picture: title, description and a two-column photo gallery in a
   wide column; beside it a dark panel naming the category with a button for
   each sub-category, then the Enquire Now card. The 2:1 split and the
   stacking point are the product page's (product-single.css), so the two
   page types line up.

   The enquiry card itself is the Contact page's, styled by contact.css,
   which loads with this sheet. Only its sidebar adjustments are here.
   ============================================================ */

/* ---------- Banner ----------
   Taller than an ordinary page's on a wide screen, as the reference's
   picture is: it is the page's first impression of the range. */
@media (min-width:62rem){
  .gps-pagehead--detail{aspect-ratio:1920/640}
}

.gps-subcat{padding-block:var(--sp-8) var(--sp-9)}

.gps-subcat__layout{
  display:grid;
  gap:var(--sp-7);
  align-items:start;
}
@media (min-width:62rem){
  .gps-subcat__layout{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    gap:clamp(2rem,4vw,3.5rem);
  }
}
.gps-subcat__main,
.gps-subcat__side{min-width:0}

/* ---------- Title and description ---------- */
.gps-subcat__head{margin:0 0 var(--sp-4)}
.gps-subcat__eyebrow{margin:0 0 var(--sp-2);text-align:left}
.gps-subcat__title{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(var(--fs-2xl),2.6vw,var(--fs-3xl));
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);
  line-height:var(--lh-head);
  color:var(--gps-black);
}
.gps-subcat__intro{
  max-inline-size:72ch;
  margin:0 0 var(--sp-7);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--grey-600);
}
.gps-subcat__intro > :first-child{margin-top:0}
.gps-subcat__intro > :last-child{margin-bottom:0}
.gps-subcat__intro p{margin:0 0 var(--sp-4);text-wrap:pretty}

/* ---------- Photo gallery ----------
   Two across, as on the reference, one across on a phone. The frame keeps
   the 7:4 shape every catalogue picture is cut to, so a gallery mixing the
   client's own uploads with the starter photographs still lines up. */
.gps-subcat__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4);
  margin:0;padding:0;list-style:none;
}
@media (min-width:40rem){
  .gps-subcat__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.gps-subcat__item{margin:0}
.gps-subcat__shot{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:7/4;
  background:var(--grey-100);
  border:1px solid var(--grey-300);
}
.gps-subcat__img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.gps-subcat__shot::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 -4px 0 var(--gps-yellow);
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease);
}
.gps-subcat__shot:hover .gps-subcat__img,
.gps-subcat__shot:focus-visible .gps-subcat__img{transform:scale(1.04);filter:brightness(1.06)}
.gps-subcat__shot:hover::after,
.gps-subcat__shot:focus-visible::after{opacity:1}
.gps-subcat__shot:focus-visible{outline:3px solid var(--gps-yellow);outline-offset:2px}

.gps-subcat__products{margin-block-start:var(--sp-8)}
.gps-subcat__subhead{
  margin:0 0 var(--sp-5);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-snug);
  color:var(--gps-black);
}

/* ---------- Sidebar ----------
   Sticky on a wide screen, so the form stays beside the gallery as it
   scrolls. The desktop header does not stick, so a small gap is all the
   offset it needs. */
.gps-subcat__side{display:grid;gap:var(--sp-5);align-content:start}
@media (min-width:62rem){
  .gps-subcat__side{position:sticky;top:var(--sp-5)}
}

/* The category panel: dark ground, the category's name, and a button per
   sub-category -- yellow, with the page you are on in white, which is the
   reference's arrangement in this site's colours. */
.gps-subcat__panel{
  padding:var(--sp-5);
  background:var(--gps-black);
  border-radius:var(--radius-tile);
}
.gps-subcat__panel-title{
  margin:0 0 var(--sp-4);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-snug);
  color:var(--gps-white);
}
.gps-subcat__panel-title a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color var(--dur-fast) var(--ease);
}
.gps-subcat__panel-title a:is(:hover,:focus-visible){border-bottom-color:var(--gps-yellow)}
.gps-subcat__chips{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin:0;padding:0;list-style:none;
}
.gps-subcat__chip{
  display:inline-flex;align-items:center;
  min-height:2.25rem;
  padding:var(--sp-1) var(--sp-3);
  border-radius:3px;
  background:var(--gps-yellow);
  font-size:var(--fs-sm);
  line-height:1.3;
  color:var(--gps-black);
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.gps-subcat__chip:hover{background:var(--gps-red);color:var(--gps-white)}
.gps-subcat__chip:focus-visible{outline:3px solid var(--gps-white);outline-offset:2px}
.gps-subcat__chip.is-current{
  background:var(--gps-white);
  color:var(--gps-black);
  font-weight:var(--fw-bold);
  cursor:default;
}

/* The enquiry card in the sidebar: the reference's title sits to the left
   there, over a single column of fields. A hairline and a red top rule
   on top of the card's shadow, so the white card stays a distinct object
   on the white page beside the gallery -- the shadow alone is faint. */
.gps-contact__enquiry--sidebar{
  border:1px solid var(--grey-300);
  border-top:3px solid var(--gps-red);
}
.gps-contact__enquiry--sidebar .gps-enquiry__title{
  margin-bottom:var(--sp-4);
  text-align:left;
}
@media (min-width:62rem){
  .gps-contact__enquiry--sidebar .gps-enquiry__form{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Enlarged view (assets/js/gallery.js) ---------- */
.gps-lightbox{
  inline-size:min(72rem,calc(100vw - 2rem));
  max-inline-size:none;
  padding:0;
  border:0;
  background:transparent;
  color:var(--gps-white);
}
.gps-lightbox::backdrop{background:rgba(17,17,17,.88)}
.gps-lightbox__figure{margin:0;display:grid;gap:var(--sp-3);justify-items:center}
.gps-lightbox__img{
  display:block;
  max-inline-size:100%;
  max-block-size:calc(100vh - 8rem);
  inline-size:auto;block-size:auto;
  object-fit:contain;
  background:var(--gps-black);
}
.gps-lightbox__caption{
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.85);
  text-align:center;
}
.gps-lightbox__btn{
  position:fixed;
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;
  border:0;border-radius:50%;
  background:var(--gps-black);
  color:var(--gps-white);
  font-size:1.5rem;line-height:1;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.gps-lightbox__btn:hover,
.gps-lightbox__btn:focus-visible{background:var(--gps-yellow);color:var(--gps-black)}
.gps-lightbox__btn:focus-visible{outline:3px solid var(--gps-white);outline-offset:2px}
.gps-lightbox__close{top:var(--sp-4);right:var(--sp-4)}
.gps-lightbox__prev{left:var(--sp-4);top:50%;transform:translateY(-50%)}
.gps-lightbox__next{right:var(--sp-4);top:50%;transform:translateY(-50%)}
.gps-lightbox__count{
  position:fixed;left:50%;bottom:var(--sp-4);transform:translateX(-50%);
  font-size:var(--fs-xs);letter-spacing:.14em;color:rgba(255,255,255,.75);
}

@media (prefers-reduced-motion:reduce){
  .gps-subcat__img,
  .gps-subcat__shot::after{transition:none}
  .gps-subcat__shot:hover .gps-subcat__img,
  .gps-subcat__shot:focus-visible .gps-subcat__img{transform:none}
}