/* Iron Elk — service-page hero and editorial photo sections. Linked only from the 78 service hub and
   service-detail pages; the homepage, lighting pages, guides, location and company pages do not load it. */

/* ---- hero: title, intro and CTA above one content-width photograph ---- */
.sv-hero .wrap{padding-bottom:clamp(28px,4vw,48px)}
.sv-hero-head{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "aside" "photo";row-gap:18px;margin-top:14px}
.sv-hero-text{grid-area:text;min-width:0}
.sv-hero-text .h-hero{margin-bottom:14px}
.sv-hero-text .lead{margin-bottom:0;max-width:64ch}
.sv-hero-aside{grid-area:aside;min-width:0}
.sv-hero-aside .cta-stack{margin-top:0}
.sv-hero-photo{grid-area:photo;position:relative;margin:clamp(6px,1.4vw,16px) 0 0;min-width:0}
.sv-hero-photo picture{display:block}
.sv-hero-photo img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;border:0;border-top:2px solid var(--gold);border-radius:0 0 2px 2px;background:#1a1a1a}
.sv-hero-photo::after{content:"";position:absolute;right:-10px;bottom:-10px;width:56px;height:56px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);pointer-events:none}
/* hardscaping/landscaping heroes keep their gradient and title casing from premium-landscape.css;
   only their small-screen re-ordering margins are neutralised here. */
.pl-hero.sv-hero .h-hero{margin-bottom:14px}
.pl-hero.sv-hero .lead{margin-bottom:0}
.pl-hero.sv-hero .cta-stack{margin-top:0}
.pl-hero.sv-hero .trust{margin-top:22px}
.pl-hero.sv-hero .wrap{padding-bottom:clamp(28px,4vw,48px)}
@media (min-width:900px){
  .sv-hero-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"text aside" "photo photo";column-gap:clamp(24px,4vw,64px);align-items:start}
  .sv-hero-aside{justify-self:start}
}
/* phones: heading, photo, then the longer intro and CTA, so copy never buries the photograph */
@media (max-width:720px){
  .sv-hero-head{grid-template-areas:none;grid-template-columns:minmax(0,1fr);row-gap:14px}
  .sv-hero-text{display:contents}
  .sv-hero-text,.sv-hero-aside,.sv-hero-photo{grid-area:auto}
  .sv-hero .sv-hero-head .h-hero{order:1;margin-bottom:0}
  .sv-hero-photo{order:2;margin:2px 0 4px}
  .sv-hero-photo::after{display:none}
  .sv-hero .sv-hero-head .lead{order:3;margin-bottom:0}
  .sv-hero-aside{order:4}
}

/* ---- editorial photo section ---- */
.sv-ed-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "lead" "side" "note";gap:18px}
.sv-ed-head{grid-area:head;max-width:640px}
.sv-ed-head .kicker{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold-d)}
.sv-ed-head .h2{margin:0}
.sv-ed-fig{margin:0;min-width:0;position:relative}
.sv-ed-fig picture{display:block}
.sv-ed-fig img{display:block;width:100%;height:auto;border-radius:2px;background:#e9e7e1}
.sv-ed-lead{grid-area:lead}
.sv-ed-side{grid-area:side;align-self:end}
.sv-ed-cap{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--mut)}
.sv-ed-cap .sv-ed-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);margin-bottom:2px}
.sv-ed-note{grid-area:note;margin:0;font-size:13.5px;line-height:1.55;color:var(--mut);padding-top:10px;border-top:1px solid var(--line);max-width:70ch}
/* two-photo hubs keep the gold corner on the lead figure */
.sv-ed-2 .sv-ed-lead::after{content:"";position:absolute;right:-10px;top:-10px;width:56px;height:56px;border-right:2px solid var(--gold);border-top:2px solid var(--gold);pointer-events:none;z-index:1}
/* single-photo sections: the figure's picture and caption become grid items so the caption can sit in the
   text stack beside the photo; the <figure>/<figcaption> relationship is unchanged in the document. */
.sv-ed-1 .sv-ed-lead{display:contents}
.sv-ed-1 .sv-ed-lead picture{grid-area:lead;position:relative;min-width:0}
.sv-ed-1 .sv-ed-lead picture::after{content:"";position:absolute;right:-10px;top:-10px;width:56px;height:56px;border-right:2px solid var(--gold);border-top:2px solid var(--gold);pointer-events:none;z-index:1}
.sv-ed-1 .sv-ed-lead > img{grid-area:lead}
.sv-ed-1 .sv-ed-cap{grid-area:cap;margin:0}
.sv-ed-1 .sv-ed-grid{grid-template-areas:"head" "lead" "cap" "note";gap:14px}
.sv-ed-1 .sv-ed-cap{font-size:15.5px;line-height:1.6;color:var(--ink)}
.sv-ed-1 .sv-ed-cap .sv-ed-k{margin-bottom:4px}
@media (min-width:900px){
  .sv-ed-1 .sv-ed-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr);grid-template-areas:"lead ." "lead head" "lead cap" "lead note" "lead .";column-gap:clamp(24px,4vw,56px);row-gap:0;align-items:start}
  .sv-ed-1 .sv-ed-head{margin-bottom:14px}
  .sv-ed-1 .sv-ed-cap{margin-bottom:16px}
  .sv-ed-1 .sv-ed-note{border-top:1px solid var(--line);padding-top:12px}
  .sv-ed-2 .sv-ed-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head head" "lead side" "note note";column-gap:clamp(24px,3vw,40px);row-gap:22px;align-items:start}
  .sv-ed-2 .sv-ed-side{align-self:end}
}
@media (max-width:720px){
  .sv-ed-1 .sv-ed-lead picture::after,.sv-ed-2 .sv-ed-lead::after{display:none}
}