/*
  Seaforth service + gallery page layer.

  Loaded ONLY by the service pages and gallery.html, never by index.html, so the
  approved homepage is untouched. Everything here is driven by the same brand
  variables as output.css / seaforth-architectural.css, so a reskin still works
  from one place. Shared sections (#hero, #trust-strip, #project-proof, #faqs,
  #contact, footer, chatbot) reuse the homepage markup and inherit the approved
  architectural styling unchanged; this file only covers what those pages add.
*/

/* ---------------------------------------------------------------- breadcrumb */

.sf-breadcrumb {
  margin-bottom: 1.25rem;
  color: #9fb4c6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sf-breadcrumb a {
  color: rgb(var(--brand-rgb));
  text-decoration: none;
}

.sf-breadcrumb a:hover {
  text-decoration: underline;
}

.sf-breadcrumb span[aria-hidden="true"] {
  padding: 0 0.4rem;
  color: #56708a;
}

.sf-breadcrumb--centred {
  text-align: center;
}

/* ------------------------------------------------- honest-disclosure callouts */

.sf-note {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-left: 4px solid rgb(var(--brand-rgb));
  background: #eef5f7;
  color: #33475b;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: left;
}

.sf-note--light {
  background: #fff;
  border-left-width: 4px;
}

/* -------------------------------------------------------- service hero card */

.svc-card {
  border: 1px solid rgb(var(--brand-rgb) / 0.6);
  border-left: 5px solid rgb(var(--brand-rgb));
  border-radius: 2px;
  background: rgb(var(--dark-rgb) / 0.78);
  box-shadow: 18px 18px 0 rgb(var(--dark-rgb) / 0.32);
  backdrop-filter: blur(8px);
}

.svc-tile {
  border-radius: 2px;
  background: #fff;
  min-height: 44px;
}

@media (max-width: 900px) {
  .svc-card {
    box-shadow: 10px 10px 0 rgb(var(--dark-rgb) / 0.26);
  }
}

/* --------------------------------------------------------- service types row */

#service-types .svc-icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: rgb(var(--brand-rgb));
  box-shadow: 5px 5px 0 rgb(var(--dark-rgb) / 0.14);
}

#service-types > div > div:first-child {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgb(var(--dark-rgb) / 0.18);
}

#service-types > div > div:first-child h2 {
  max-width: 900px;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

#service-types > div > div:first-child > p:last-child {
  border-left: 4px solid rgb(var(--brand-rgb));
  padding-left: 1.25rem;
}

#service-types > div > .mt-12 {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

#service-types h3 {
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------- why-it-matters */

#service-why {
  border-top: 1px solid rgb(var(--brand-rgb) / 0.18);
}

#service-why h2 {
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em;
}

/* The compiled Tailwind build has no lg:flex-col / lg:justify-end utilities, so
   the media column is composed here instead of with classes that would be dead. */
#service-why .sf-why-media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

@media (min-width: 1024px) {
  #service-why .sf-why-media {
    height: 500px;
  }
}

#service-why .svc-photo-panel {
  padding: 1.1rem;
  border-radius: 2px;
  background: linear-gradient(135deg, rgb(var(--brand-rgb)) 0%, var(--brand-deep) 100%);
  box-shadow: 16px 16px 0 rgb(var(--dark-rgb) / 0.14);
}

#service-why .svc-photo-panel img {
  border-radius: 2px !important;
  max-height: 460px;
  object-position: center;
}

#service-why .sf-note {
  max-width: 100%;
}

@media (max-width: 900px) {
  #service-why .svc-photo-panel {
    box-shadow: 9px 9px 0 rgb(var(--dark-rgb) / 0.14);
  }
}

/* --------------------------------------------------------------- gallery page */

#gallery-header {
  border-bottom: 5px solid rgb(var(--brand-rgb));
}

#gallery-header h1 {
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

#gallery-cta {
  border-top: 5px solid rgb(var(--brand-rgb));
}

#gallery-cta h2 {
  letter-spacing: -0.04em;
}

.gal-grid {
  column-count: 4;
  column-gap: 14px;
}

@media (max-width: 1100px) {
  .gal-grid { column-count: 3; }
}

@media (max-width: 780px) {
  .gal-grid { column-count: 2; }
}

@media (max-width: 520px) {
  .gal-grid { column-count: 1; }
}

.gal-item {
  display: block;
  margin: 0 0 14px;
  break-inside: avoid;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgb(var(--brand-rgb) / 0.35);
  box-shadow: 7px 7px 0 rgb(var(--brand-rgb) / 0.1);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.gal-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 240ms ease;
}

.gal-item:hover {
  box-shadow: 12px 12px 0 rgb(var(--brand-rgb) / 0.16);
  position: relative;
  z-index: 5;
}

.gal-item:hover img {
  transform: scale(1.035);
}

/* lightbox */
.gal-lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(var(--dark-rgb) / 0.94);
  padding: 24px;
}

.gal-lb.gal-open { display: flex; }

.gal-lb img {
  max-width: 92vw;
  max-height: 80vh;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.6);
}

.gal-lb-cap {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  color: #e8eaf0;
  font-size: 14px;
  text-align: center;
}

.gal-lb-x,
.gal-lb-prev,
.gal-lb-next {
  position: absolute;
  border: none;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  font-family: inherit;
}

.gal-lb-x { top: 20px; right: 20px; }
.gal-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.gal-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

.gal-lb-x:hover,
.gal-lb-prev:hover,
.gal-lb-next:hover { background: rgb(255 255 255 / 0.28); }

/* ------------------------------------------------------------------- FAQ bits */

[id^="faq-"] {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

[id^="faq-"]:not(.hidden) {
  max-height: 1000px;
  opacity: 1;
}

dt button svg { transition: transform 0.2s ease-in-out; }
dd { transition: all 0.2s ease-in-out; }
dd.hidden { display: none; }
.faq-button svg { transition: transform 0.2s ease-in-out; }
.faq-answer { transition: all 0.2s ease-in-out; }