/* ═══════════════════════════════════════
   ROOFING-AND-CONSTRUCTION-PROJECTS.CSS - projects and portfolio page
   Sections: intro, before and after sliders, photo gallery, final call to action
═══════════════════════════════════════ */

/* ── INTRO ── */
/* Navy band with white text, the same as the services overview page. */
.projects-intro {
  background: var(--navy);
  color: var(--white);
  padding: 3.5rem 0;
  text-align: center;
}
.projects-intro .container { max-width: 900px; }
.projects-intro .eyebrow { color: var(--white); }
/* Heading styled after the logo, the same as the other page heroes: big
   block capitals, with the middle line in red between two red rules. */
.hero-title {
  font-family: var(--font-logo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
.hero-title span { display: block; }
/* White lettering on the navy background with a red drop shadow set just
   off the letters, the same as the light gray heroes. */
.hero-title-main {
  color: var(--white);
  font-size: clamp(2.6rem, 5.6vw, 5.25rem);
  white-space: nowrap;
  text-shadow:
    0 0 1px var(--navy),
    0 0 2px var(--navy),
    2px 2px 0 var(--navy),
    3px 3px 0 var(--navy),
    5px 5px 0 var(--red),
    6px 6px 0 var(--red);
}
.hero-title-sub {
  display: flex !important;
  align-items: center;
  gap: 0.9rem;
  color: var(--red);
  font-size: clamp(1.4rem, 2.7vw, 2.5rem);
  letter-spacing: 0.04em;
  margin-top: 0.75rem;
  white-space: nowrap;
}
.hero-title-sub::before,
.hero-title-sub::after {
  content: "";
  flex: 1;
  height: 5px;
  background: var(--red);
}
.hero-title-loc {
  color: var(--white);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  letter-spacing: 0.04em;
  margin-top: 0.6rem;
  text-align: center;
}
.projects-intro .lead { font-size: 1.2rem; margin-bottom: 1.75rem; }
.projects-intro .btn-group { justify-content: center; }
/* The red button sits on navy here, so hover goes white instead of navy. */
.projects-intro .btn:not(.btn-light):hover,
.projects-intro .btn:not(.btn-light):focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

/* ── BEFORE AND AFTER ── */
.before-after { background: var(--white); }
.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
.ba-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
/* The project photos are 4:3, so show them whole. */
.ba-grid .compare { aspect-ratio: 4 / 3; }

/* ── GALLERY ── */
.gallery {
  background: var(--light-gray);
  border-top: var(--border);
}
/* A wrapping row instead of a grid, so a last row that is not full sits in
   the centre. --cols sets how many photos fit across. */
.gallery-grid {
  --cols: 4;
  --gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.gallery-grid > .gallery-item {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}
/* Every thumbnail is cropped to the same shape so the grid lines up; the
   whole photo shows in the pop-up. */
.gallery-item {
  display: block;
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s;
}
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.04); }
.gallery-item:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ── FINAL CTA ── */
.final-cta {
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.final-cta .container { max-width: 820px; }
.final-cta .eyebrow { color: var(--white); }
.final-cta h2 { color: var(--white); }
.final-cta h2 em { font-style: normal; color: var(--red); }
.final-cta p { margin: 1rem auto 1.75rem; font-size: 1.2rem; }
.final-cta .btn-group { justify-content: center; }
/* Red buttons sit on navy here, so hover goes white instead of navy. */
.final-cta .btn:not(.btn-light):hover,
.final-cta .btn:not(.btn-light):focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  .gallery-grid { --cols: 3; }
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .projects-intro { padding: 2.5rem 0; }
  .ba-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .gallery-grid { --cols: 2; --gap: 0.75rem; }
}

/* ══════════════════════
   PHONES (≤ 768px): bigger hero title, matching the other main pages
══════════════════════ */
@media (max-width: 768px) {
  /* The main title line is allowed to break onto two lines on phones so it
     can be set much larger. The size is chosen so the longest single word in
     any page title ("Installation") still fits the width. */
  .hero-title-main {
    font-size: clamp(2.6rem, 16.5vw, 5.25rem);
    line-height: 0.95;
    white-space: normal;
    text-align: center;
  }
  .hero-title-sub { font-size: clamp(1.7rem, 8.6vw, 2.9rem); }
  .hero-title-loc { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  /* Larger hero text on phones so it reads easily, the same on every main page. */
  .projects-intro .eyebrow { font-size: 1.3rem; }
  .projects-intro .lead { font-size: 1.35rem; line-height: 1.6; }
  /* The short hint lines under the headings stay centred, unlike longer
     paragraphs, which main.css left-aligns on phones. */
  .before-after .section-head p,
  .gallery .section-head p { text-align: center; }
  .ba-title { font-size: 1.4rem; }
  .final-cta p { font-size: 1.25rem; }
}