/* ====================================================
   EAST BAY ROOFERS - LAYOUT V2
   Adds real page structure: bands, splits, cards, panels.
   Sits AFTER industrial-theme.css and custom.css.
   Tokens come from industrial-theme.css :root
   ==================================================== */

/* ---------- BANDS ---------- */
.band {
    padding: var(--space-2xl) 0;
    background: #fff;
}
.band--tint { background: var(--steel-100); }
.band--dark { background: linear-gradient(160deg, var(--steel-900), var(--steel-800)); }
.band--dark, .band--dark p, .band--dark li { color: var(--steel-200); }
.band--dark h2, .band--dark h3 { color: #fff; }
.band__inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-md); }

.kicker {
    display: inline-block;
    font-family: var(--font-display);
    letter-spacing: 2.5px;
    font-size: .85rem;
    color: var(--orange-heat);
    margin-bottom: .35rem;
}
.kicker::before {
    content: "";
    display: inline-block;
    width: 26px; height: 3px;
    background: var(--orange-heat);
    vertical-align: middle;
    margin-right: .6rem;
}

h2.sec {
    font-family: var(--font-impact);
    font-size: clamp(1.55rem, 2.6vw, 2.3rem);
    line-height: 1.12;
    color: var(--steel-900);
    letter-spacing: -.5px;
    margin: 0 0 .55rem;
    text-transform: none;
}
.band__lead {
    color: var(--steel-600);
    font-size: 1.08rem;
    max-width: 62ch;
    margin: 0 0 var(--space-lg);
}
.band--dark .band__lead { color: var(--steel-300); }

/* ---------- SPLIT (text | visual) ---------- */
.split {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: var(--space-xl);
    align-items: start;
}
.split--reverse { grid-template-columns: .85fr 1.15fr; }
.split--reverse .split__visual { order: -1; }
.split--even { grid-template-columns: 1fr 1fr; }
.split__body > p {
    font-size: 1.04rem;
    line-height: 1.78;
    color: var(--steel-600);
    margin: 0 0 1.1rem;
    max-width: 64ch;
}
.split__body > p:last-child { margin-bottom: 0; }
.split__visual { position: relative; }
.split__visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    box-shadow: 0 18px 40px -18px rgba(26, 31, 46, .45);
}
.split__visual figcaption {
    font-size: .82rem;
    color: var(--steel-500);
    margin-top: .6rem;
    line-height: 1.5;
}
.visual-badge {
    position: absolute;
    left: -14px; bottom: 18px;
    background: var(--orange-heat);
    color: #fff;
    font-family: var(--font-display);
    letter-spacing: 1.4px;
    font-size: .95rem;
    padding: .55rem 1rem;
    border-radius: 6px;
    box-shadow: 0 10px 22px -10px rgba(255, 107, 53, .8);
}

/* ---------- GLANCE / SPEC PANEL ---------- */
.glance {
    position: sticky;
    top: 88px;
    border: 1px solid var(--steel-200);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 34px -22px rgba(26, 31, 46, .4);
}
.glance__head {
    background: var(--steel-900);
    color: #fff;
    font-family: var(--font-display);
    letter-spacing: 2px;
    font-size: 1rem;
    padding: .7rem 1.1rem;
}
.glance__row {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: .5rem;
    padding: .62rem 1.1rem;
    border-bottom: 1px solid var(--steel-100);
    font-size: .92rem;
}
.glance__row:last-of-type { border-bottom: 0; }
.glance__row dt { color: var(--steel-500); margin: 0; }
.glance__row dd { margin: 0; color: var(--steel-900); font-weight: 600; }
.glance__foot { padding: .9rem 1.1rem; background: var(--steel-100); }
.glance__foot .btn { width: 100%; text-align: center; }

/* ---------- CARD GRIDS ---------- */
.cards { display: grid; gap: 1.1rem; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.fcard {
    background: #fff;
    border: 1px solid var(--steel-200);
    border-radius: 10px;
    padding: 1.25rem 1.3rem 1.15rem;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 30px -22px rgba(26, 31, 46, .5);
    border-color: var(--steel-300);
}
.fcard h3 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    letter-spacing: .8px;
    color: var(--steel-900);
    margin: 0 0 .45rem;
}
.fcard p {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--steel-600);
    margin: 0;
}
.fcard--num { padding-left: 3.4rem; }
.fcard__num {
    position: absolute;
    left: 1.1rem; top: 1.15rem;
    font-family: var(--font-impact);
    font-size: 1.35rem;
    color: var(--orange-heat);
    line-height: 1;
}
.fcard__tag {
    display: inline-block;
    font-family: var(--font-display);
    letter-spacing: 1.2px;
    font-size: .78rem;
    color: var(--orange-heat);
    background: rgba(255, 107, 53, .1);
    padding: .18rem .5rem;
    border-radius: 4px;
    margin-bottom: .5rem;
}

/* ---------- TAG CLOUD (neighborhoods) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags a, .tags span {
    display: inline-block;
    font-size: .88rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--steel-200);
    color: var(--steel-700);
    text-decoration: none;
    transition: all .15s ease;
}
.tags a:hover {
    background: var(--steel-900);
    border-color: var(--steel-900);
    color: #fff;
}

/* ---------- SPEC LIST (permits etc) ---------- */
.spectable {
    border: 1px solid var(--steel-200);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.spectable__row {
    display: grid;
    grid-template-columns: 38% 62%;
    gap: .75rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--steel-100);
    font-size: .93rem;
    line-height: 1.55;
}
.spectable__row:last-child { border-bottom: 0; }
.spectable__row dt { color: var(--steel-500); font-weight: 500; margin: 0; }
.spectable__row dd { margin: 0; color: var(--steel-800); }
.spectable__row dd strong { color: var(--steel-900); }

/* ---------- PROJECT CARDS ---------- */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.project {
    background: #fff;
    border: 1px solid var(--steel-200);
    border-radius: 10px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.project__meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.project__chip {
    font-family: var(--font-display);
    letter-spacing: 1.1px;
    font-size: .74rem;
    padding: .2rem .55rem;
    border-radius: 4px;
    background: var(--steel-100);
    color: var(--steel-700);
}
.project__chip--yr { background: var(--steel-900); color: #fff; }
.project p { font-size: .93rem; line-height: 1.6; color: var(--steel-600); margin: 0; }
.project__quote {
    border-left: 3px solid var(--orange-heat);
    padding-left: .7rem;
    font-style: italic;
    color: var(--steel-700);
    font-size: .92rem;
    line-height: 1.55;
}

/* ---------- DARK SPEC PANEL ---------- */
.specpanel {
    background: linear-gradient(150deg, var(--steel-900), var(--steel-800));
    border-radius: 14px;
    padding: 1.6rem 1.8rem;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: center;
}
.specpanel__label {
    font-family: var(--font-display);
    letter-spacing: 2px;
    color: var(--orange-heat);
    font-size: 1.05rem;
    line-height: 1.3;
}
.specpanel p { color: var(--steel-200); font-size: .98rem; line-height: 1.7; margin: 0; }

/* ---------- STAT STRIP ---------- */
.statstrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background: var(--steel-900);
    border-radius: 12px;
    padding: 1.3rem 1rem;
}
.statstrip div { text-align: center; border-right: 1px solid rgba(255,255,255,.1); }
.statstrip div:last-child { border-right: 0; }
.statstrip b {
    display: block;
    font-family: var(--font-impact);
    font-size: 1.7rem;
    color: var(--orange-heat);
    line-height: 1.1;
}
.statstrip span { font-size: .8rem; color: var(--steel-300); letter-spacing: .4px; }

/* ---------- SERVICE ROWS ---------- */
.svcrows { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.6rem; }
.svcrow {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: .6rem;
    align-items: baseline;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--steel-200);
    font-size: .96rem;
    color: var(--steel-700);
}
.svcrow::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--safety-green);
    font-size: .8rem;
}
.svcrow a { color: var(--steel-900); font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(255,107,53,.35); }
.svcrow a:hover { border-bottom-color: var(--orange-heat); }

/* ---------- CALLOUT ---------- */
.note {
    border-left: 4px solid var(--orange-heat);
    background: var(--steel-100);
    padding: 1rem 1.2rem;
    border-radius: 0 8px 8px 0;
    font-size: .96rem;
    line-height: 1.65;
    color: var(--steel-700);
    margin: 1.2rem 0;
}
.note--ok { border-left-color: var(--safety-green); background: #f0fdf4; }
.note strong { color: var(--steel-900); }

/* ====================================================
   HEADING NORMALIZATION
   The stock theme shouts every H2 in 56px uppercase,
   which reads as one long wall. One consistent editorial
   scale for the whole page.
   ==================================================== */
main h2, .section h2 {
    font-family: var(--font-impact);
    font-size: clamp(1.55rem, 2.6vw, 2.3rem);
    line-height: 1.12;
    letter-spacing: -.5px;
    text-transform: none;
    color: var(--steel-900);
    margin: 0 0 .55rem;
}
main h3, .section h3, .card h3 {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: .3px;
}
main p { max-width: 72ch; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
    .split, .split--reverse, .split--even { grid-template-columns: 1fr; gap: var(--space-lg); }
    .split--reverse .split__visual { order: 0; }
    .cards--3, .cards--4, .projects, .svcrows { grid-template-columns: 1fr 1fr; }
    .glance { position: static; }
    .statstrip { grid-template-columns: 1fr 1fr; }
    .specpanel { grid-template-columns: 1fr; gap: .7rem; }
    .band { padding: var(--space-xl) 0; }
}
@media (max-width: 640px) {
    .cards--2, .cards--3, .cards--4, .projects, .svcrows { grid-template-columns: 1fr; }
    .glance__row, .spectable__row { grid-template-columns: 1fr; gap: .15rem; }
    .glance__row dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; }
}

/* ---------- TWO-COLUMN LONG PROSE (optional) ---------- */
.prose-cols { columns: 2; column-gap: 3rem; max-width: none; }
.prose-cols p { break-inside: avoid; margin: 0 0 1rem; }
.prose-cols p:first-child::first-letter { font-size: 1.05em; }
@media (max-width: 860px) { .prose-cols { columns: 1; } }

/* ================= EDITORIAL (blog posts) ================= */
.article{max-width:74ch;margin:0 auto;padding:0 4px}
.art__lede{font-size:1.12rem;line-height:1.7;color:#2b2f36}
.art__lede>p:first-of-type{font-size:1.22rem;line-height:1.62;color:#15181d;font-weight:500;margin-bottom:1.3rem}
.art__lede p+p{margin-top:1.15rem}
.art__h2{font-family:var(--font-impact);font-size:clamp(1.45rem,2.3vw,1.95rem);
  line-height:1.22;letter-spacing:-.4px;text-transform:none;margin:2.6rem 0 .95rem;
  padding-top:1.5rem;border-top:1px solid #dfe3ea;color:#15181d}
.art__h2::before{content:"";display:block;width:46px;height:3px;background:#e2663a;
  margin-bottom:.95rem;border-radius:2px}
.article p{font-size:1.02rem;line-height:1.75;color:#2b2f36;margin:0 0 1.05rem}
.article ul,.article ol{margin:0 0 1.25rem 1.1rem;padding-left:1rem}
.article li{margin-bottom:.5rem;line-height:1.7;color:#2b2f36}
.art__h3{font-family:var(--font-impact);font-size:clamp(1.15rem,1.7vw,1.4rem);
  letter-spacing:-.2px;margin:2.1rem 0 .6rem;color:#15181d;padding-left:.7rem;
  border-left:3px solid #e2663a;line-height:1.25}
.art__fig{margin:2rem 0;border-radius:10px;overflow:hidden;background:#eef1f5}
.art__fig img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover}
@media(max-width:640px){.art__lede>p:first-of-type{font-size:1.1rem}}

/* ================= SITE PAGES (about, gallery, contact) ================= */
main .band h2.sec+p,main .band h2.sec+.band__lead{max-width:70ch}

/* ================= EDGE SAFETY ================= */
/* the theme sets .top-alert with zero horizontal padding, so the banner copy
   runs into the viewport edge at every width */
.top-alert{padding-left:clamp(16px,4vw,52px)!important;padding-right:clamp(16px,4vw,52px)!important}
header,header.site-header{padding-left:clamp(16px,4vw,52px);padding-right:clamp(16px,4vw,52px);box-sizing:border-box}
header nav,.nav-menu{padding-left:0!important}
.article{max-width:74ch;padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px)}
@media(max-width:640px){
  .top-alert{font-size:.78rem;line-height:1.4;letter-spacing:.02em}
  .top-alert strong{display:inline}
}

/* page heroes: the theme leaves .hero-content flush to the viewport, so big
   headlines start 16px from the edge. Give every content column a real gutter. */
.hero-content,.page-hero .hero-content,.section .container,.wide-container{
  width:100%;max-width:1180px;margin-left:auto;margin-right:auto;
  padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px);
  box-sizing:border-box}
.hero h1{max-width:22ch}

/* gallery cards: real photos instead of empty boxes */
.gallery-image{height:220px;overflow:hidden;background:#e6eaef}
.gallery-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gallery-card:hover .gallery-image img{transform:scale(1.04)}

/* ================= HOMEPAGE ================= */
.hero h1 .h1-sub{display:block;font-size:.52em;letter-spacing:.02em;text-transform:none;
  color:#fff;opacity:.92;margin-top:.35rem;font-weight:500}
.hm-fig{margin:1.6rem auto 2.2rem;max-width:1180px;border-radius:12px;overflow:hidden;
  background:#e9edf2;box-shadow:0 6px 24px rgba(12,22,40,.10)}
.hm-fig img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover}
.svc-group{margin-bottom:2.4rem}
.svc-group__label{font-family:var(--font-impact);font-size:1.05rem;letter-spacing:.14em;
  text-transform:uppercase;color:#e2663a;margin:0 0 1rem;padding-bottom:.5rem;
  border-bottom:1px solid #e3e7ee}
.section h2,.section-alt h2{max-width:24ch;margin-left:auto;margin-right:auto}
@media(max-width:700px){.hm-fig{margin:1.2rem 0 1.6rem;max-height:260px}}

/* EDITORIAL: related reading block at the foot of the article */
.art__related{margin:clamp(2.2rem,4vw,3.4rem) 0 0;padding:clamp(1.3rem,2.4vw,2rem) clamp(1.2rem,2.6vw,2.2rem);
  background:#f7f4ef;border:1px solid #e6e1d8;border-left:4px solid #e2663a}
.art__related .art__h2{margin:0 0 .9rem;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.art__related ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.art__related li{margin:0;line-height:1.45}
.art__related a{font-weight:600;text-decoration:none;border-bottom:1px solid rgba(226,102,58,.45)}
.art__related a:hover{border-bottom-color:#e2663a}
@media (max-width:640px){.art__related{padding:1.1rem 1rem}}

/* EDITORIAL: sourced manufacturer values, visually distinct from body copy */
.art__spec{margin:1rem 0 1.6rem;padding:.9rem 1.1rem;background:#fbf9f5;
  border:1px solid #ece6dc;border-left:3px solid #8a9a7b;font-size:.95rem;line-height:1.6}
.art__spec strong{font-family:var(--font-impact);letter-spacing:.02em;text-transform:uppercase;
  font-size:.88rem;color:#5d6b50;display:block;margin-bottom:.35rem;letter-spacing:.05em}
.art__note{margin:2rem 0 0;font-size:.85rem;line-height:1.55;color:#6b6459;
  border-top:1px solid #e6e1d8;padding-top:.8rem}