/* ═══════════════════════════════════════
   LOUISVILLE-ROOFING-AND-CONSTRUCTION-SERVICES.CSS - services overview page
   Sections: intro, then one row per service (roofing, roof replacement,
   siding, gutters, painting touch-ups)
═══════════════════════════════════════ */

/* ── INTRO ── */
/* Navy band with white text. */
.services-intro {
  background: var(--navy);
  color: var(--white);
  padding: 3.5rem 0;
  text-align: center;
}
.services-intro .container { max-width: 900px; }
.services-intro .eyebrow { color: var(--white); }
/* Heading styled after the logo, the same as the home and about heroes: big
   navy block capitals, with "and Construction" 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 "Integrity Roofing" and centre it, so
     the red rules and the last line sit centred under the main title. */
  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;
}
/* The red button sits on navy here, so hover goes white instead of navy. */
.services-intro .btn:not(.btn-light):hover,
.services-intro .btn:not(.btn-light):focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.services-intro .lead { font-size: 1.2rem; margin-bottom: 1.75rem; }
.services-intro .btn-group { justify-content: center; }

/* ── SERVICE ROWS ── */
/* One section per service: photo on one side, short description and a link
   to that service's page on the other. The sides swap on every other row. */
.service-row { background: var(--white); }
.service-row:nth-of-type(odd) {
  background: var(--light-gray);
  border-top: var(--border);
  border-bottom: var(--border);
}
.service-row .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.service-row:nth-of-type(odd) .service-row-image { order: 2; }
.service-row-image {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.service-row-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.service-row-text h2 { margin-bottom: 1rem; }
.service-row-text p { font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.25rem; }
/* Short bold label above each bulleted list. */
.service-row-text h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
}
.service-row-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;
}
.service-row-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
}
/* Red square bullets in place of the default dots. */
.service-row-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 9px;
  height: 9px;
  background: var(--red);
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .services-intro { padding: 2.5rem 0; }
  .service-row .container { grid-template-columns: 1fr; gap: 1.75rem; }
  /* The photo always sits above its text once the row stacks. */
  .service-row:nth-of-type(odd) .service-row-image { order: 0; }
}

/* ══════════════════════
   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;
  }
  .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. */
  .services-intro .eyebrow { font-size: 1.3rem; }
  .services-intro .lead { font-size: 1.35rem; line-height: 1.6; }
}