/* ═══════════════════════════════════════
   ABOUT.CSS - Integrity Roofing and Construction about page
   Sections: about intro, what sets us apart, service areas, FAQ
═══════════════════════════════════════ */

/* ── ABOUT INTRO ── */
/* Same sizing and layout as the home page hero: but mirrored,
   with the text on the left and the large photo on the right. */
.about-intro {
  background: var(--page-gray);
  padding: 2rem 0 4rem;
  border-bottom: var(--border);
}
.about-intro .container {
  max-width: 1640px;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 3.5vw, 4rem);
  align-items: stretch;
}
/* The text column is as tall as the photo, and its contents are spread out
   so the heading lines up with the photo's top and the buttons with its bottom. */
.about-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-text p { font-size: clamp(1.15rem, 1.45vw, 1.45rem); line-height: 1.7; }
.about-text .eyebrow { text-align: center; font-size: clamp(0.8rem, 1.2vw, 1rem); margin-bottom: 0.3rem; }
/* Heading styled after the logo, the same as the home page hero: big navy
   block capitals, with "and Construction" in red between two red rules.
   "About" sits above it. */
.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 sit centred under the main title. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.25rem;
}
.hero-title span { display: block; }
.hero-title-pre {
  color: var(--black);
  font-size: clamp(2rem, 4vw, 3.75rem);
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 0.5rem;
}
/* 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.6rem, 5.6vw, 5.25rem);
  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);
}
.about-text p { margin-bottom: 1.25rem; }
.about-text .btn-group { margin-top: 0.5rem; }
/* The whole photo is always shown at its natural 4:3 shape, never cropped. */
.about-image {
  align-self: start; /* the photo keeps its own height; the text matches it */
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.about-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

/* ── WHAT SETS US APART ── */
/* White boxes on navy, like the "Why Integrity" boxes on the home page. */
.about-points {
  background: var(--navy);
  color: var(--white);
}
.about-points h2,
.about-points h2 .h2-dark { color: var(--white); }
/* Let the one-line heading use the full width. */
.about-points .section-head { max-width: none; }
.about-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
/* Text starts at the top of each box. */
.about-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;
}
.about-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;
}

/* ── SERVICE AREAS ── */
.areas {
  background: var(--light-gray);
  border-top: var(--border);
  border-bottom: var(--border);
}
/* Wider than the standard 1200px so the long heading and the intro line
   each fit on one line. */
.areas .container { max-width: 1410px; }
.areas .section-head { max-width: none; }
.areas-top {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
.areas h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.9rem;
}
.areas-cities p { margin: 1.5rem 0 1.25rem; font-size: 1.1rem; }
.areas-map {
  border: var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.areas-map img { width: 100%; }
/* The map opens at full size when tapped, so the town names can be zoomed
   in on. The hint only shows on phones, where the map is small. */
.areas-map a { display: block; text-decoration: none; }
.areas-map-hint {
  display: none;
  padding: 0.6rem 1rem;
  border-top: var(--border);
  background: var(--white);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--navy);
}
.areas-list {
  list-style: none;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
}
.areas-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  break-inside: avoid;
}
/* Red square bullets in place of the default dots. */
.areas-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 9px;
  height: 9px;
  background: var(--red);
}
.areas-counties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.areas-counties > div {
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  padding: 1.5rem;
}
.areas-list-cols {
  columns: 2;
  column-gap: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* ── FAQ ── */
.faq { background: var(--white); }
.faq .container { max-width: 900px; }
.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;
}

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  /* Stack the hero where the home page hero does, so the big title has room. */
  .about-intro .container { grid-template-columns: 1fr; gap: 2rem; max-width: 900px; }
  .about-intro .about-image { order: -1; }
  .about-list { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .about-intro { padding: 2.5rem 0; }
  .about-intro .container { gap: 1.75rem; }
  .about-list { grid-template-columns: 1fr; }
  .areas-top { grid-template-columns: 1fr; gap: 2rem; }
  .areas-map-hint { display: block; }
  .areas-counties { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .areas-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;
  }
  .about-text { min-width: 0; }
  .hero-title-pre { font-size: clamp(2.4rem, 12vw, 3.75rem); }
  .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. */
  .about-text .eyebrow { font-size: 1.3rem; }
  .about-text .lead { font-size: 1.35rem; line-height: 1.6; }
}