/* ============================================================================
   SaraPath — STRUCTURE LAYER
   The literal building parts, reusable anywhere. Drawn in CSS from the
   photograph at assets/images/SPBuilding-2X.tif:

     .glazing     a curtain wall — panes on a dark glazing grid, each pane
                  its own value, with a reflection cutting across several
     .fin         a brise-soleil blade: lit leading edge, hard cast shadow
     .fin--mounts adds the square bracket blocks that hold the blade off
     .pilaster    a white structural post that overshoots its bay and carries
                  a square stub at the head
     .brick       the east-wing running-bond face brick
   ============================================================================ */

/* ------------------------------------------------------------- 1. GLAZING --
   Glass is photographed, not drawn. Three real surfaces from the client's
   stock pass, each tinted to brand navy so the palette holds:

     .glazing          big smooth panes, cloud reflection  — the default bay
     .glazing--bays    tighter pane grid, dark mullions    — narrow bays
     .glazing--deep    low-key glass                       — grounds behind plates

   Rule, unchanged: a glazed surface is a BACKGROUND. Type never sits on it
   directly — it sits on a .plate.

   EVERY GLAZED SURFACE STANDS ON BRAND NAVY. The photograph is a texture laid
   over #00245D at a stated strength, not a colour in its own right — the
   stock glass runs cyan and the practice's blue does not. The strength is set
   by a flat navy layer painted OVER the picture, so "40% navy" and "the glass
   at 60%" are the same statement:

     .glazing        doors and bays        glass at 42%
     .glass-photo    the pathologists      glass at 40%
     .glazing--deep  the footer            glass at 35%

   These are `background` shorthands, so anything overriding them has to
   restate every layer — see `.glazing--bays` below.                          */
.glazing {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(rgba(0, 30, 78, .58), rgba(0, 30, 78, .58)),
    url("../img/tex/glass-1800.webp") center / cover no-repeat,
    var(--c-brand-navy);
}
.glazing::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--sheen-glass),
    linear-gradient(168deg, rgba(0,30,78,.18) 0%, rgba(0,18,50,.52) 100%);
}
.glazing > *, .glazing > .band__in, .glazing > .wrap { position: relative; z-index: 2; }

.glazing--bays {
  background:
    linear-gradient(rgba(0, 30, 78, .58), rgba(0, 30, 78, .58)),
    url("../img/tex/glass-bays-1400.webp") center / cover no-repeat,
    var(--c-brand-navy);
}
/* A half-step lighter than the default bay, not a different material. The
   two doors stand side by side and have to read as two bays of one wall. */
.glazing--light::after {
  background:
    var(--sheen-glass),
    linear-gradient(168deg, rgba(0,30,78,.14) 0%, rgba(0,18,50,.44) 100%);
}
.glazing--deep {
  background:
    linear-gradient(rgba(0, 30, 78, .65), rgba(0, 30, 78, .65)),
    url("../img/tex/glass-deep-2000.webp") center / cover no-repeat,
    var(--c-brand-navy);
}
.glazing--deep::after {
  background:
    var(--sheen-glass),
    linear-gradient(168deg, rgba(0,22,60,.34) 0%, rgba(2,10,26,.60) 100%);
}
/* A thin aluminium head and sill. That is the whole frame. */
.glazing--framed {
  border-top: 4px solid var(--c-mullion-alu);
  border-bottom: 4px solid var(--c-mullion-alu);
}

/* The large glazed ground the pathologist plate floats on. The most navy of
   the three: the window is 60% brand blue and the glass reads as texture on
   it, so the white plate is the only bright thing in the section. */
.glass-photo {
  position: relative; isolation: isolate;
  background:
    linear-gradient(rgba(0, 36, 93, .60), rgba(0, 36, 93, .60)),
    url("../img/tex/glass-deep-2800.webp") center / cover no-repeat,
    var(--c-brand-navy);
}
.glass-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--sheen-glass), linear-gradient(168deg, rgba(0,30,78,.24), rgba(0,20,54,.48));
}
.glass-photo > * { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- 2. FIN --
   A blade held off the wall. The top face catches the sun as a bright line,
   the body is cement, and it throws a hard shadow onto whatever is behind. */
.fin {
  position: relative;
  border: 0; margin: 0;
  height: var(--line-fin);
  background: linear-gradient(180deg, var(--c-lit-edge), var(--c-cement-3));
  box-shadow: 0 2px 4px rgba(16, 25, 42, .16), 0 6px 14px -6px rgba(16, 25, 42, .18);
}
.fin--thin { height: var(--line-mullion); box-shadow: 0 2px 0 rgba(16,25,42,.2); }
.fin--on-glass { box-shadow: 0 var(--line-fin) 0 rgba(6, 12, 24, .5); }

/* The square brackets. Real ones sit on a wide regular module. */
.fin--mounts::before { content: none; }

/* -------------------------------------------------------------- 4. BRICK --
   Photographed running bond from the stock pass. Held back so the white
   cards sitting on it stay the subject. */
.brick {
  position: relative; isolation: isolate;
  background: var(--c-brick-2) url("../img/tex/brick-2200.webp") center / cover no-repeat;
}
.brick::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% -10%, rgba(255,236,220,.18), rgba(255,236,220,0) 58%),
    linear-gradient(180deg, rgba(20,10,8,.62) 0%, rgba(38,20,16,.34) 26%,
                            rgba(38,20,16,.34) 74%, rgba(20,10,8,.66) 100%);
}
.brick > *, .brick > .wrap { position: relative; z-index: 2; }

/* A quiet ground for sections that need separation without a material. The
   photographed concrete read as dirty at screen size — this is a soft, clean
   gradient instead, brighter at the top edge where the light falls. */
.concrete {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% -10%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #F7F9FA 0%, #EEF1F4 46%, #EEF1F4 60%, #F7F9FA 100%);
}
.concrete > *, .concrete > .wrap { position: relative; z-index: 2; }

/* --------------------------------------------------------- 5. containment --
   Desktop must hold the centre. Anything that is not the hero photograph
   is bound to the frame, so nothing runs to the far edges of a wide screen. */
.frame {
  max-width: var(--frame-max);
  margin-inline: auto;
}

@media (prefers-reduced-motion: no-preference) {
  /* The reflection drifts a few pixels as you scroll a glazed surface —
     the only motion in the system, and it is the building's own. */
  .glazing { background-attachment: scroll, scroll, scroll, scroll, scroll, scroll; }
}


/* --------------------------------------------------------- 6. MOTION SURFACE
   A ground that happens to be film. The clip sits at the very back, an overlay
   sits on top of it, and content sits on top of that. Injected by
   js/surfaces.js only when motion is welcome and the screen is wide enough;
   otherwise the poster still does the job on its own.                        */
.surface {
  position: relative; isolation: isolate; overflow: hidden;
}
.surface__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  opacity: .85;
}
/* the poster still, so there is never an empty frame */
.surface::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--surface-poster, none) center / cover no-repeat;
}
.surface::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--surface-veil, linear-gradient(168deg, rgba(0,36,93,.72), rgba(8,15,28,.86)));
}
/* Content always clears the veil. Some children set their own z-index, so this
   has to out-specify them — a veil painting over the copy is the one failure
   this component must never have.

   The :not() is load-bearing: the injected <video> is a child too, and giving
   it position:relative drops it into normal flow, where its intrinsic height
   inflates the section and it paints over everything. */
.surface > *:not(.surface__video),
.surface > .band__in,
.surface > .wrap,
.surface > .intro__in { position: relative; z-index: 3; }
.surface > .surface__video { position: absolute; }

/* Named veils — how far each ground is pushed back behind its content. */
.surface--cta {
  --surface-poster: url("../img/video/glass-panes.webp");
  --surface-veil:
    radial-gradient(120% 90% at 18% -12%, rgba(186,214,248,.20), rgba(186,214,248,0) 56%),
    linear-gradient(168deg, rgba(0,32,84,.62) 0%, rgba(0,18,48,.84) 100%);
}
.surface--doctors {
  --surface-poster: url("../img/video/glass-mullions.webp");
  --surface-veil:
    radial-gradient(120% 90% at 18% -12%, rgba(186,214,248,.18), rgba(186,214,248,0) 56%),
    linear-gradient(168deg, rgba(0,28,72,.46) 0%, rgba(8,15,28,.70) 100%);
}
/* Referring-practices band: the curtain wall sits behind the navy as texture,
   never as a picture. Held down hard — at a third strength with no veil it
   came out a mid blue that had nothing to do with the brand. */
.surface--refer {
  --surface-poster: url("../img/video/glass-panes.webp");
  --surface-veil:
    radial-gradient(120% 90% at 16% -14%, rgba(120,170,235,.12), rgba(120,170,235,0) 54%),
    linear-gradient(168deg, rgba(0,26,68,.62) 0%, rgba(0,14,40,.84) 100%);
}
.surface--refer::before { opacity: .55; }
.surface--refer .surface__video { opacity: .55; }
/* the poster is only a stand-in; hide it the moment the clip is live so the
   two do not stack into ~19% */
.surface.has-video::before { opacity: 0; }

.surface--work {
  --surface-poster: url("../img/video/histology.webp");
  /* inside a frame the tissue can be itself — only a light sheen over it */
  --surface-veil:
    radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.30), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(16,25,42,.06) 0%, rgba(16,25,42,.14) 100%);
}


/* ============================================================== 7. THE SEAM
   Two grounds meet on a shadow, not on a drawn object.

   A blade was tried here twice — first with bracket blocks on the window
   module, then as a plain cement bar. Both read as an illustration of a
   building part rather than as a building. What a real plane does where it
   passes in front of another is simpler and quieter: it lays a soft shadow
   on it. So the lower ground carries an inset cast at its head, graded, no
   line, and the seam is a change in light rather than a thing.               */
/* The assembly, top to bottom, all of it 1px or graded — never an object:

     1px  lit arris   the head of the lower plane catching the light
     1px  reveal      the shadow line where the two planes actually meet
     1px  second bevel a fainter return below the reveal
     ~16px cast       the upper plane's shadow lying on the lower one

   That is a double bevel and a reveal in three hairlines. It reads as
   thickness at any zoom and as nothing at all from a distance, which is what
   a real edge does. */
.glass-photo {
  box-shadow:
    inset 0 1px 0 rgba(186, 214, 255, .40),
    inset 0 2px 0 rgba(0, 8, 26, .55),
    inset 0 3px 0 rgba(160, 195, 245, .13),
    inset 0 16px 26px -18px rgba(0, 8, 26, .78);
}
/* the same assembly on a pale ground, in ink rather than in navy */
.wash-gold,
.cement--shade,
.concrete {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 2px 0 rgba(16, 25, 42, .13),
    inset 0 3px 0 rgba(255, 255, 255, .55),
    inset 0 14px 22px -18px rgba(16, 25, 42, .42);
}


/* ------------------------------------------------------------ THE RULE ----
   Where two grounds meet and the change in light is not enough on its own,
   a white rule is set on the seam: a 3px bar with its lower half held back,
   a reveal, then a single fine line under it. A double rule, drawn thin, with
   a modern cast — not a bar of cement with brackets on it.

   It is the last child of the upper section and every section is
   `position: relative`, so it pins to the seam whatever the padding does. */
.seam-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 5;
  pointer-events: none;
}
.seam-rule::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(180deg,
    #FFFFFF 0 2px,
    rgba(255,255,255,.62) 2px 3px);
  box-shadow:
    0 1px 1px rgba(0, 10, 30, .30),
    0 6px 14px -6px rgba(0, 10, 30, .55);
}
.seam-rule::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: rgba(255, 255, 255, .30);
}
@media (max-width: 620px) {
  .seam-rule::before { height: 2px; }
  .seam-rule::after { bottom: -5px; }
}