/* ═════════════════════════════════════════════════════════════════════════════
   se-retreat-hero-v2.css — M237. LEGIBILITY ONLY, on the six designed retreat
   heroes. No colour, type, spacing or layout decision of the design is changed,
   and the six skin stylesheets are untouched and still hold the design exactly
   as it was handed over.

   THE FAULT, measured at a true phone viewport (375x812) and again at 1280.
   The hero is a full-bleed photograph with white text over a gradient scrim.
   The scrim the design ships is nearly clear across its upper half:

       rgba(30,26,21,.42) 0% -> .18 at 30% -> .46 at 62% -> .9 at 100%

   The text block is anchored to the BOTTOM of a hero 78-82vh tall, but the block
   itself is tall - eyebrow, a heading up to 74px, a subtitle, a row of chips, two
   buttons and a review line - so its TOP lands around the middle of the hero, in
   the .18-.46 stretch. Over a light photograph the eyebrow and the subtitle there
   read as cream on pale green. Seen, not inferred: on the Devon hero the eyebrow
   "RESIDENTIAL RETREAT · DEVON, SOUTHWEST ENGLAND" sits directly on a sunlit
   field and is close to invisible.

   THE FIX. The scrim keeps its shape - light at the top, so the photograph is
   still a photograph - and gains weight from the middle down, where the words
   are. The stops move; the colour, the direction and the idea do not. The two
   smallest pieces of white text also get a little more shadow.

   WHAT IS **NOT** FIXED HERE, AND WHY, because the obvious second fix does not
   work and a rule that does nothing is worse than no rule. At phone width the
   1800x927 hero photograph is scaled to the hero's HEIGHT by `object-fit: cover`,
   so only about a quarter of its width survives the crop. The obvious answer is
   a shorter hero. It cannot work: MEASURED ON ALL SIX at 375x812, the hero's
   height is set by its own text block every time, never by the vh floor -

       devon 747   lincolnshire 783   trigonos 824
       cat   854   online-cat   818   online-happy 694      floor at 58vh = 471

   - so a `min-height` of 58vh, which v1 of this file carried, changes nothing on
   any of the six. It was removed rather than shipped looking effective. Making
   the crop keep more of the picture needs either a shorter text block or a
   portrait crop of each photograph, and both are design changes, not stylesheet
   ones. `object-position` was considered and rejected for the same honesty: the
   crop at phone width is HORIZONTAL (the box is taller than the image, so the
   sides are trimmed, not the top), every one of these photographs is already
   centred, and shifting it would be a guess about six different pictures.

   NO FONT SIZE IS SET ANYWHERE IN THIS FILE, so nothing here can drop a control
   below the 16px phone floor that four sideways-scrolling reports were traced to.
   Horizontal overflow was re-checked on all six at 375 wide: none.

   SPECIFICITY: the leading `body` buys one element over the design's own
   `.se-retreat-x .hero .scrim` (0,3,0), so this wins wherever it is printed in
   the chain rather than depending on being enqueued last.

   TO REVERSE IT: delete the enqueue in samadhi-events.php. Nothing else refers
   to this file.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Every width. Same gradient, more weight under the words. */
body .se-retreat-devon         .hero .scrim,
body .se-retreat-lincolnshire  .hero .scrim,
body .se-retreat-trigonos      .hero .scrim,
body .se-retreat-cat           .hero .scrim,
body .se-retreat-online-cat    .hero .scrim,
body .se-retreat-online-happy  .hero .scrim {
    background: linear-gradient(180deg,
        rgba(30, 26, 21, .46)   0%,
        rgba(30, 26, 21, .24)  26%,
        rgba(30, 26, 21, .56)  56%,
        rgba(30, 26, 21, .92) 100%);
}

/* A little more shadow under the subtitle and the review line, the two smallest
   pieces of white text on the photograph. The heading carries its own already
   and is large enough not to need more. */
body .se-retreat-devon         .hero .sub, body .se-retreat-devon         .hero-trust,
body .se-retreat-lincolnshire  .hero .sub, body .se-retreat-lincolnshire  .hero-trust,
body .se-retreat-trigonos      .hero .sub, body .se-retreat-trigonos      .hero-trust,
body .se-retreat-cat           .hero .sub, body .se-retreat-cat           .hero-trust,
body .se-retreat-online-cat    .hero .sub, body .se-retreat-online-cat    .hero-trust,
body .se-retreat-online-happy  .hero .sub, body .se-retreat-online-happy  .hero-trust {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

/* On a phone the words occupy nearly the whole hero, so the scrim has to carry
   them from much nearer the top. */
@media (max-width: 700px) {
    body .se-retreat-devon         .hero .scrim,
    body .se-retreat-lincolnshire  .hero .scrim,
    body .se-retreat-trigonos      .hero .scrim,
    body .se-retreat-cat           .hero .scrim,
    body .se-retreat-online-cat    .hero .scrim,
    body .se-retreat-online-happy  .hero .scrim {
        background: linear-gradient(180deg,
            rgba(30, 26, 21, .50)   0%,
            rgba(30, 26, 21, .40)  22%,
            rgba(30, 26, 21, .68)  55%,
            rgba(30, 26, 21, .93) 100%);
    }
}