/* ==========================================================
   DT PROPERTY IMPROVEMENTS
   Inner pages (portfolio, and later terms / privacy)
   Loads AFTER site.css and builds on it
   ========================================================== */

/* ===== Current page in the menu ===== */
.main-nav a[aria-current="page"] { color: #fff; }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ===== Page hero ===== */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(9rem, 17vw, 12.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: radial-gradient(60% 90% at 85% 0%, rgba(211, 19, 27, 0.2), rgba(7, 7, 7, 0) 62%), var(--black);
  border-bottom: 1px solid var(--line);
}
.page-hero .hero-title { margin-bottom: 0; }
.page-lead { max-width: 38rem; margin-top: 2rem; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--muted); line-height: 1.7; }

/* ===== Filter bar ===== */
.filter-bar {
  position: sticky; top: calc(5rem + env(safe-area-inset-top, 0px)); z-index: 60;
  background: rgba(14, 14, 14, 0.94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.filters { display: flex; gap: 0.6rem; padding-block: 1rem; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none; padding: 0.8rem 1.3rem; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78); background: transparent; border: 1px solid rgba(255, 255, 255, 0.22); cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.filter:hover { color: #fff; border-color: #fff; }
.filter.is-active { background: var(--red); border-color: var(--red); color: #fff; }

/* ===== Gallery ===== */
.pf-gallery { padding-top: clamp(4rem, 8vw, 6.5rem); }
.pf-intro { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pf-group { scroll-margin-top: 9rem; }
.pf-group + .pf-group { margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line-dark); }
.pf-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pf-head h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); margin-top: 1.2rem; }
.pf-empty { text-align: center; color: var(--text-muted); padding: 3rem 0; }

/* Long words or web addresses in a job title must wrap, never stretch the page */
.case-copy h3, .case-copy p { overflow-wrap: anywhere; }

/* Jobs added by the team (single photo and extra photos) */
.job-media { display: grid; gap: 0.6rem; min-width: 0; }
.job-single { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 0; background: #111; cursor: zoom-in; }
.job-single img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.job-single:hover img { transform: scale(1.03); }
.job-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
.job-photos button { aspect-ratio: 1 / 1; padding: 0; border: 0; background: #111; cursor: zoom-in; overflow: hidden; }
.job-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.job-photos button:hover img { transform: scale(1.07); }
.job-photos-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); margin-top: 0.4rem; }

/* ===== Photo viewer ===== */
.lightbox { position: fixed; inset: 0; z-index: 260; background: rgba(0, 0, 0, 0.94); display: grid; place-items: center; padding: 3.5rem 1rem; }
.lightbox img { max-width: min(100%, 1400px); max-height: 100%; object-fit: contain; }
.lightbox button {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(14, 14, 14, 0.8); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background-color 0.3s, border-color 0.3s;
}
.lightbox button:hover { background: var(--red); border-color: var(--red); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; margin-top: -24px; }
.lightbox-next { right: 1rem; top: 50%; margin-top: -24px; }
.lightbox-count { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); }

/* ===== Call to action band ===== */
.cta-band { background: var(--black); border-top: 1px solid var(--line); padding: clamp(5rem, 10vw, 8.5rem) 0; }
.cta-band h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); margin: 1.4rem 0 1.6rem; max-width: 14em; }
.cta-band p { color: var(--muted); max-width: 34rem; margin-bottom: 2.2rem; }

/* ===== Tablet / phone ===== */
@media (max-width: 960px) {
  .filter-bar { top: calc(4.4rem + env(safe-area-inset-top, 0px)); }
  .pf-group { scroll-margin-top: 8rem; }
}
@media (max-width: 640px) {
  .job-single { aspect-ratio: 4 / 3; }
  .lightbox button { width: 44px; height: 44px; }
}