/* se-retreat-fit-v5.css - M254, a fourth correction added 2026-08-23 re-verifying M248 item 11, and a
   fifth (2026-09-16) fixing the Availability date range wrapping onto two lines.
   Small corrections to the designed retreat pages, all from the client's own screenshots of
   the Mid Wales page. NOT a redesign: nothing here moves a section, changes a colour the designs
   chose, or alters what any page says. Its own sheet, following the precedent set by
   se-retreat-hero-v2.css (M237) and se-retreat-links-v1.css (M251) - the six delivered designs stay
   exactly as they were handed over, and this is one file and one enqueue line to remove.

   It is enqueued only on the six skinned retreat pages, so a bare selector here cannot reach
   anything else on the site. Every rule is written with [class*="se-retreat-"] anyway where the
   element is inside the skin, because all six skins are byte-identical in the parts being fixed:
   each one lays the facts strip out in five columns and switches to two at 860px, and each one
   shows the section bar at 700px. Checked in all six, not assumed from one. */


/* ── 1. The facts strip leaves a half-width rule across the middle of itself ──────────────────
   "7 day retreat, should be another line here? or something to make it align", with a line drawn
   along the empty right-hand half of a divider.

   The strip holds FIVE facts in a TWO-column grid below 860px, so the fifth sits alone on the last
   row. Each fact draws its own `border-top`, which is what makes the horizontal rules between rows -
   and a fact alone in column one draws a rule only half the width of the strip. The result is a
   divider that starts under WHERE, runs to the middle, and stops in mid air under FROM, which is
   exactly the gap he marked.

   So the odd one out spans the row. The rule underneath the WHERE/FROM row becomes full width
   because the cell drawing it is now full width, and FORMAT reads as the summary line it always
   was. `:last-child:nth-child(odd)` is self-limiting: a strip with an even number of facts is
   untouched, so a future skin with four or six is unaffected without anybody remembering this file.

   INSIDE THE 860px QUERY DELIBERATELY. Above it the grid is five columns and `1 / -1` would stretch
   one fact across all five. */
@media (max-width: 860px) {
  [class*="se-retreat-"] .facts .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ── 2. The footer credits sit underneath the section bar on a phone ──────────────────────────
   "on retreats pages the credits / copyright on the footers gets hidden by the menu so it would
   need a margin underneath on mobile."

   `.mobilebar` is `position:fixed; bottom:0` and appears at 700px and below. Nothing else on the
   page knows it is there, so the document ends flush behind it and the last rows of the footer -
   the charity number, the credits and the copyright - are drawn under an opaque bar. Scrolling
   does not help: the bar is fixed, so the foot of the document is the one place it can never be
   moved away from.

   The measured height is 64px (8px of top padding, a 48px link, 8px of bottom padding) plus the
   home-indicator inset, and 78px leaves the last line clear of it rather than touching it.
   `env(safe-area-inset-bottom)` is the same expression the bar itself uses for its own padding, so
   the two agree on any device by construction.

   ON THE FOOTER AND NOT ON `body`: the theme owns the body, this sheet loads only on these six
   pages, and padding the element that is actually being covered is the change that cannot have a
   side effect elsewhere. Two class names for specificity, so it wins against the chrome sheet
   whichever order the two print in. */
@media (max-width: 700px) {
  footer.se-chrome.se-chrome-footer { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}


/* ── 3. "BOOKING OPEN" is a status and was dressed as a button ────────────────────────────────
   "looks like a button does nothing."

   `.dstat` is the availability label on a date card, and it has three states. Two of them are
   quiet tinted pills - FULLY BOOKED on linen, LAST SPACE REMAINING on gold. The third,
   `.dstat.open`, is solid `--terra` with white text: the exact fill, weight and radius of
   "Reserve your place", "Book" in the section bar, and every other primary button on the page. It
   is not a control and never was, so a member pressed it and nothing happened.

   It keeps the pill, the uppercase and the size - it is still the most prominent of the three
   states, which is right, because it is the good news. What it loses is the fill that means
   "press me": the terracotta moves from the background to the text, on the same tint the design
   already uses elsewhere. Told apart from its siblings by colour, not by looking pressable.

   `cursor:default` is stated so the pointer never changes shape over it, which is the other half
   of the same promise on a desktop. Not made a link to the booking form instead: that would answer
   the complaint by ADDING an action to a label, and the page already carries "Reserve your place"
   and a Book tab in the fixed bar, both of which go there.

   `.datecard` IS IN THE SELECTOR ON PURPOSE, and v1 of this file left it out and silently lost. The
   skin writes `.se-retreat-cat .datecard .dstat.open`, three classes; `[class*=] .dstat.open` is
   also three, so loading later was not enough - and the failure was partial rather than obvious,
   because `cursor` and `box-shadow` are set nowhere else and did apply. The pill went on being
   terracotta while two of the three properties took effect. Measured in the browser rather than
   assumed from source order, which is the only reason it was caught. */
[class*="se-retreat-"] .datecard .dstat.open {
  background: var(--terra-tint, #f7e9dd);
  color: var(--terra-dark, #9f5219);
  cursor: default;
  box-shadow: none;
}

/* ── 4. The facts strip's sub-labels do not line up along the row ─────────────────────────────
   Re-checked 2026-08-23 while verifying M248 item 11 against the live page. Rule 1 above fixes the
   half-width DIVIDER at 860px and below, but that is a different symptom from the one David actually
   circled: on the live page, at every width, the small second line under each fact ("Booking open",
   "Arrive from 3pm, ends 11am", "Pantperthog, Machynlleth", "£100 deposit to reserve", "On-site,
   off-site or online") does not sit on a shared baseline, because `.fact` is a plain block and a
   cell whose main line wraps to two lines (WHERE, or DATES/DURATION once the grid narrows to two
   columns) pushes its own small line down while its neighbours' stay put. Measured at 900px wide
   (five columns, well outside rule 1's 860px query) and at 375px: three different vertical
   positions for the five small lines each time.

   Fixed by pinning every fact's small line to the bottom of its row instead of leaving it wherever
   the wrapped text happens to end: `.fact` becomes a column flex box the same height as its
   grid row (grid's own stretch already gives it that), `.v` grows to fill what is left under the
   label, and `margin-top:auto` on the small line sinks it to the bottom of that space. Works
   identically in the five-column and two-column layouts and does not touch rule 1's own fix, which
   is about which grid column a fact spans, not what happens inside one. Specificity
   (0,4,1) beats the skin's own `.se-retreat-cat .fact .v small` at (0,3,1), and this file already
   loads after the skin sheet. */
[class*="se-retreat-"] .facts .fact { display: flex; flex-direction: column; }
[class*="se-retreat-"] .facts .fact .v { display: flex; flex-direction: column; flex: 1; }
[class*="se-retreat-"] .facts .fact .v small { margin-top: auto; padding-top: 6px; }


/* ── v3: the theme's own h3 colour was bleeding into every designed page ──────
   The theme styles bare h3 in its bright orange (#e4780d). The designs set no
   colour on h3 at all - film titles, tab-panel headings, travel and schedule
   heads are meant to inherit the page's ink - and ANY rule beats inheritance,
   so all seven designed pages showed theme-orange headings. David spotted it
   on the day retreat on 2026-08-23; measured, the six siblings had it too.
   `inherit` rather than a hard ink: an h3 on a dark band keeps that band's
   colour. Specificity (0,1,2) restores inheritance over the theme's bare h3
   while still losing to any skin rule like `.se-retreat-x .film h3`. */
div[class^="se-retreat-"] h3, div[class*=" se-retreat-"] h3 { color: inherit; }


/* ── 5. The Availability date range wraps onto two lines ──────────────────────────────────────
   "Fri 2 – Mon 5 July 2027" (Trigonos, 2027) and "Thursday 20th – Monday 24th May 2027" (Devon)
   both break across two lines inside `.datecard .dv` on a phone-width screen and narrower. The
   base skin sets `font-size:24px` on that line with no `white-space`, and on a ~375px screen the
   element's own content width (about 277px, inside the card's padding) is short of the roughly
   386px a full "Weekday Nth - Weekday Nth Month Year" string needs at that size. The date is the
   thing people scan for - the skin's own comment above `.datecards.one` already says so - so
   wrapping it defeats the point, and it also sat left-aligned against an otherwise-centred card.

   Fixed by centring the line and letting its size shrink with the viewport, `clamp()`ed between a
   floor that stays legible and the skin's own 24px ceiling, with `white-space:nowrap` so it
   commits to one line rather than wrapping at an in-between size. Scoped to the four skins that
   actually show a date RANGE at this font size (cat, devon, lincolnshire, trigonos) - checked live
   against Devon and Trigonos, the two with an active occurrence at the time of writing; the day
   retreat and the two online skins render `.dv` at 21px for a single date and were not showing
   this fault, so they are left as they were. The single-occurrence card (`.datecards.one`) also
   gets a little more room to work with, widened from 620px towards the section's own max width. */
.se-retreat-cat .datecard .dv,
.se-retreat-devon .datecard .dv,
.se-retreat-lincolnshire .datecard .dv,
.se-retreat-trigonos .datecard .dv {
  text-align: center;
  white-space: nowrap;
  font-size: clamp(15px, 4.6vw, 24px);
}
.se-retreat-cat .datecards.one,
.se-retreat-devon .datecards.one,
.se-retreat-lincolnshire .datecards.one,
.se-retreat-trigonos .datecards.one {
  max-width: 680px;
}