/* Brian Rogers Portfolio v2 — category page styles (extends style.css) */

.cat-hero{
  padding:60px 0 50px;
  position:relative;
  overflow:hidden;
}
.cat-hero .halftone{ top:-140px; left:-160px; width:480px; opacity:0.35; }
.cat-hero .wrap{
  position:relative; z-index:1;
  display:flex;
  align-items:center;
  gap:28px;
}
.cat-hero img.icon{ height:76px; width:auto; flex:0 0 auto; }
.cat-hero .crumb{
  font-size:12.5px;
  color:var(--label);
  margin-bottom:8px;
  font-family:'Swiss721 Condensed';
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.cat-hero .crumb a{ text-decoration:none; color:inherit; }
.cat-hero .crumb a:hover{ text-decoration:underline; }
.cat-hero h1{ font-size:clamp(28px,4.2vw,44px); }
.cat-hero .dek{
  margin-top:12px;
  max-width:64ch;
  font-family:'Pill Gothic';
  font-weight:300;
  font-size:16px;
}
html:not(.lit) .cat-hero .dek{ color:rgba(247,247,244,0.8); }
html.lit .cat-hero .dek{ color:rgba(36,31,33,0.8); }

.cat-body{ padding:50px 0 30px; }

.spread{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:44px;
  align-items:center;
  padding:46px 0;
  border-top:1px solid var(--line-dark);
}
html.lit .spread{ border-color:var(--line-light); }
.spread:first-of-type{ border-top:none; padding-top:0; }
.spread.reverse{ direction:rtl; }
.spread.reverse > *{ direction:ltr; }

.spread figure{ margin:0; position:relative; }
.spread img.shot{
  width:100%;
  display:block;
  border:1px solid var(--line-dark);
}
html.lit .spread img.shot{ border-color:var(--line-light); }
.spread.contain figure{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
}
.spread.contain img.shot{
  width:auto;
  max-width:100%;
  max-height:420px;
  border:none;
}

.spread .note{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.spread .note .arrow{
  margin-top:6px;
  flex:0 0 auto;
}
.spread .note-label{
  font-family:'Swiss721 Condensed';
  font-size:13px;
  color:var(--label);
  margin-bottom:8px;
  letter-spacing:0.02em;
}
.spread h3{
  font-size:19px;
  margin-bottom:4px;
  font-family:'Pill Gothic';
  font-weight:600;
  text-transform:none;
  color:inherit;
}
.spread p{
  font-family:'Pill Gothic';
  font-weight:300;
  font-size:15px;
  max-width:50ch;
  margin:6px 0 0 0;
}
html:not(.lit) .spread p{ color:rgba(247,247,244,0.78); }
html.lit .spread p{ color:rgba(36,31,33,0.78); }

.image-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.image-row img.shot{
  width:100%;
  border:1px solid var(--line-dark);
}
html.lit .image-row img.shot{ border-color:var(--line-light); }

.client-strip{
  margin-top:10px;
  padding:36px 0;
  border-top:1px solid var(--line-dark);
}
html.lit .client-strip{ border-color:var(--line-light); }
.client-strip h4{
  font-family:'Swiss721 Condensed';
  font-size:13px;
  color:var(--slate);
  margin-bottom:16px;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.client-strip ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.client-strip li{
  font-size:13px;
  font-family:'Pill Gothic';
  padding:8px 14px;
  border:1px solid var(--line-dark);
}
html.lit .client-strip li{ border-color:var(--line-light); }

.cat-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:40px 0 10px;
  margin-top:10px;
  border-top:2px solid var(--slate);
}
.cat-nav a{
  text-decoration:none;
  font-family:'Swiss721 Condensed';
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cat-nav a .k{
  font-family:'Pill Gothic';
  font-size:11px;
  font-weight:300;
  color:var(--slate);
  text-transform:none;
  letter-spacing:0;
}
.cat-nav a:hover{ color:var(--label); }
.cat-nav a.next{ text-align:right; align-items:flex-end; }

/* ==================================================================
   PHOTO COLLAGE — overlapping, rotated prints, matching the original
   print layout's cut-and-paste feel. Falls back to a simple stacked
   list on narrow screens where absolute positioning stops helping.
   ================================================================== */
.collage-row{
  display:grid;
  grid-template-columns: 0.9fr 2fr;
  gap:40px;
  align-items:center;
  padding:50px 0;
}
.collage-row.dark{
  background:var(--ink-2);
  margin:0 -32px;
  padding:56px 32px;
}
html.lit .collage-row.dark{ background:#1f2426; color:var(--paper); }
.collage-row.dark .note-label{ color:var(--lime); }
.collage-row.dark p{ color:rgba(247,247,244,0.82) !important; }
.collage-row.dark .note-label{ font-family:'Swiss721 Condensed'; font-size:14px; letter-spacing:0.02em; margin-bottom:6px; }

.collage-caption .note-label{
  font-family:'Swiss721 Condensed';
  font-size:13px;
  color:var(--label);
  margin-bottom:8px;
  letter-spacing:0.02em;
}
.collage-caption p{
  font-family:'Pill Gothic';
  font-weight:300;
  font-size:15.5px;
  max-width:32ch;
}
html:not(.lit) .collage-caption p{ color:rgba(247,247,244,0.82); }
html.lit .collage-caption p{ color:rgba(36,31,33,0.82); }

.collage{
  position:relative;
  height:var(--ch, 420px);
}
.collage .ph{
  position:absolute;
  top:var(--t,0); left:var(--l,0);
  width:var(--w,220px);
  transform:rotate(var(--r,0deg));
  box-shadow:0 16px 32px rgba(0,0,0,0.4);
  z-index:var(--z,1);
  transition:transform .25s ease, box-shadow .25s ease;
}
.collage .ph img{ display:block; width:100%; height:auto; }
.collage .ph.framed{ border:7px solid #fff; box-shadow:0 16px 34px rgba(0,0,0,0.5); }
.collage .ph:hover{ transform:rotate(0deg) scale(1.03); z-index:9; box-shadow:0 20px 40px rgba(0,0,0,0.5); }

/* ---------- "Logo by BR" callout badge ---------- */
.badge-callout{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  margin-top:18px;
  width:64px;
}
.badge-callout .dotted-arrow{
  width:0;
  height:26px;
  border-left:2px dotted var(--slate);
  position:relative;
}
.badge-callout .dotted-arrow::after{
  content:"";
  position:absolute;
  bottom:-7px; left:-5px;
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:7px solid var(--slate);
}
.badge-callout img.badge{
  width:64px;
  height:64px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.35));
}

@media (max-width:860px){
  .collage-row{ grid-template-columns:1fr; gap:24px; }
  .collage-row.dark{ margin:0 -20px; padding:40px 20px; }
}
@media (max-width:760px){
  .collage{ height:auto !important; display:flex; flex-direction:column; gap:18px; }
  .collage .ph{
    position:static !important;
    transform:none !important;
    width:100% !important;
  }
  .collage .ph:hover{ transform:none !important; }
}

@media (max-width:760px){
  .cat-hero .wrap{ gap:16px; }
  .cat-hero img.icon{ height:56px; }
  .spread{ grid-template-columns:1fr; }
  .spread.reverse{ direction:ltr; }
  .image-row{ grid-template-columns:1fr; }
}