/* ═══════════════════════════════════════
   SIDING-INSTALLATION-LOUISVILLE.CSS - siding page
   Sections: hero, siding services, siding materials, warning signs with a
   before/after slider, benefits, why choose us, FAQ, final CTA
═══════════════════════════════════════ */

/* ── HERO ── */
/* Same sizing and layout as the home page hero: large photo on the left,
   text on the right. */
.page-hero {
  background: var(--page-gray);
  padding: 2rem 0 4rem;
  border-bottom: var(--border);
}
.page-hero .container {
  max-width: 1640px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 3.5vw, 4rem);
  align-items: center; /* the text block sits level with the middle of the photo */
}
/* The whole photo is always shown at its natural 4:3 shape, never cropped. */
.page-hero-image {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.page-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.page-hero-text .eyebrow { text-align: center; font-size: clamp(0.8rem, 1.2vw, 1rem); margin-bottom: 0.3rem; }
.page-hero-text .lead { font-size: clamp(1.1rem, 1.3vw, 1.3rem); margin-bottom: 1.25rem; }
.page-hero-text .btn-group { margin-top: 1.75rem; }
/* Heading styled after the logo, the same as the home page hero: big navy
   block capitals, with the second 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;
  /* Shrink the heading to the width of its main line and centre it, so the
     red rules sit centred under it. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
.hero-title span { display: block; }
/* "Siding Installation" is longer than the other pages' titles, so it is set
   a little smaller to fit its column without clipping. */
/* A thin white outline with a red drop shadow behind it, so the title stands
   off the light background, the same as the home page hero. */
.hero-title-main {
  color: var(--navy);
  font-size: clamp(2.2rem, 4.8vw, 4.5rem);
  white-space: nowrap;
  text-shadow:
    0 0 1px var(--white),
    0 0 2px var(--white),
    0 0 2px var(--white),
    0 0 3px var(--white),
    2px 2px 0 var(--white),
    3px 3px 0 var(--white),
    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.5rem;
  white-space: nowrap;
}
.hero-title-sub::before,
.hero-title-sub::after {
  content: "";
  flex: 1;
  height: 5px;
  background: var(--red);
}

/* ── LISTS ── */
/* Red square bullets with bold navy text, used in the warning signs and
   why choose us sections. */
.check-list {
  list-style: none;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 1.75rem;
}
.check-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  break-inside: avoid;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 9px;
  height: 9px;
  background: var(--red);
}
.check-list-cols { columns: 2; column-gap: 2rem; }

/* ── SIDING SERVICES ── */
/* White boxes on navy, like the "Why Integrity" boxes on the home page. */
.glance {
  background: var(--navy);
  color: var(--white);
}
.glance h2 { color: var(--white); }
.glance-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.glance-list li {
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--white);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  font-size: 1.05rem;
  line-height: 1.55;
}
.glance-list strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

/* ── SIDING MATERIALS ── */
.materials {
  background: var(--light-gray);
  border-bottom: var(--border);
}
.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.materials-box {
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  padding: 1.5rem;
}
.materials-box h3 {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.9rem;
}
.materials-box .check-list { margin-bottom: 0; }
.materials-box .check-list li:last-child { margin-bottom: 0; }

/* The siding photos are 4:3, so the slider is too. */
.compare { aspect-ratio: 4 / 3; }

/* ── WARNING SIGNS ── */
.signs { background: var(--white); }
.signs .container {
  max-width: 1410px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.signs h2 { margin-bottom: 1rem; }
.signs p { font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.25rem; }
/* ── BENEFITS ── */
/* White boxes on navy, each a single bold benefit with a red check mark. */
.benefits {
  background: var(--navy);
  color: var(--white);
}
.benefits .container { max-width: 1410px; }
.benefits .section-head { max-width: none; }
.benefits h2 { color: var(--white); }
.benefits-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.benefits-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--white);
  border: 2px solid var(--white);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  padding: 1.1rem 1.1rem;
}
.benefits-list li::before {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px;
}
.benefits-list strong {
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
}

/* ── WHY CHOOSE US ── */
.why-choose {
  background: var(--light-gray);
  border-bottom: var(--border);
}
.why-choose .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.why-choose-image {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.why-choose-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.why-choose h2 { margin-bottom: 1rem; }
.why-choose p { font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.25rem; }
/* Short bold label above the bulleted list. */
.why-choose h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
}

/* ── FAQ ── */
.faq { background: var(--white); }
.faq .container { max-width: 900px; }
.faq .section-head { max-width: none; }
.faq-item {
  border: var(--border);
  border-left: 6px solid var(--red);
  border-radius: 4px;
  margin-bottom: 0.85rem;
  background: var(--white);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.15rem; font-weight: 800; }
/* Plus sign that turns into a minus when the answer is open. */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  padding: 0 1.2rem 1.2rem;
  font-size: 1.1rem;
}

/* ── 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) {
  .page-hero .container { grid-template-columns: 1fr; gap: 2rem; max-width: 900px; }
  .benefits-list { grid-template-columns: repeat(2, 1fr); }
  .glance-list,
  .materials-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .page-hero { padding: 2.5rem 0; }
  .page-hero .container { gap: 1.75rem; }
  .signs .container,
  .why-choose .container { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 600px) {
  .benefits-list { grid-template-columns: 1fr; }
  .check-list-cols { columns: 1; }
}

/* ══════════════════════
   PHONES (≤ 768px): bigger hero title, matching the home page
══════════════════════ */
@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;
  }
  .page-hero-text { min-width: 0; }
  .hero-title-sub { font-size: clamp(1.7rem, 8.6vw, 2.9rem); }
  /* Larger hero text on phones so it reads easily, the same on every main page. */
  .page-hero-text .eyebrow { font-size: 1.3rem; }
  .page-hero-text .lead { font-size: 1.35rem; line-height: 1.6; }
}