/*
 * Public site — shell, typography and the photograph/sheet composition.
 *
 * The composition here is woodulight.com's own, taken from its Workshop page: a full-bleed
 * photograph with a white sheet laid over one side of it, carrying a tan sentence-case
 * heading and small grey copy, alternating side down the page. That device IS the site.
 * A list of rounded cards is not — an earlier pass had the right colours in the wrong
 * composition and read as a generic booking app wearing someone else's palette.
 *
 * Two rules run through this file and booking.css:
 *
 *   1. Nothing is CSS-uppercased. Greek capitals carry no accents, so text-transform on
 *      «Ημερομηνίες» would render «ΗΜΕΡΟΜΉΝΙΕΣ». Every uppercase label in the templates is
 *      typed literally, without accents. The live site uses text-transform: none on every
 *      element sampled, so this is the brand's own look as well as a correctness rule.
 *
 *   2. Phone first, literally. Most of this traffic is one thumb on a 390px screen arriving
 *      from an Instagram link, so the narrow layout is the real one and wide screens get
 *      the media query.
 *
 * Companion file: booking.css (dates, seat rings, panels, forms).
 */

/*
 * brand.css is NOT imported here. It is linked directly from the layout, stamped with the
 * running commit, for two reasons: an @import is fetched serially — the browser cannot
 * discover it until this file has arrived and parsed — and, more importantly, the URL inside
 * an @import carries no version, so a changed brand.css would keep being served from cache
 * even after this file was busted. That is precisely how a nav shipped with new markup and
 * an old stylesheet.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * Square, like woodulight.com — its images are square and its «SHOP NOW» button computes to
 * border-radius: 0. Scoped to .wl rather than set in brand.css because brand.css is shared
 * with Kelly's admin, and putting it there squared off every Quasar control in the admin as
 * a side effect of a decision about the public site.
 */
.wl {
    --wl-radius: 0;
}

body {
    margin: 0;
    background: var(--wl-bg);
    color: var(--wl-text);
    font-family: var(--wl-font);
    font-size: 17px;
    font-weight: 400;
    line-height: var(--wl-line-height);
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--wl-timber);
    outline-offset: 3px;
}

/* ---- Shell ------------------------------------------------------------------------- */

.wl__masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px var(--wl-gutter);
    border-bottom: 1px solid var(--wl-rule);
}

.wl__logo {
    width: auto;
    height: 32px;
}

.wl__tagline {
    margin: 0;
    color: var(--wl-muted);
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
}

.wl__footer {
    margin-top: 72px;
    padding: 30px var(--wl-gutter) 38px;
    border-top: 1px solid var(--wl-rule);
    text-align: center;
}

.wl__footer-line {
    margin: 0;
    color: var(--wl-muted);
    font-size: 14px;
}

.wl__footer-link {
    color: var(--wl-timber);
    border-bottom: 1px solid var(--wl-wood);
}

/* ---- Centred container -------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--wl-gutter);
}

.wrap--narrow {
    max-width: 720px;
}

/*
 * Trailing margins collapse out of a normal page but not out of a sheet with padding, where
 * they show up as an inch of dead white below the last line. This is the one place the
 * bottom margin has to go.
 */
.hero__sheet > :last-child,
.band__sheet > :last-child {
    margin-bottom: 0;
}

/* ---- Eyebrow ------------------------------------------------------------------------ */

/* The live site's section marker: a hairline rectangle around small letterspaced capitals. */
.eyebrow {
    display: table;
    margin: 0 auto 26px;
    padding: 9px 22px;
    border: 1px solid var(--wl-rule-strong);
    color: var(--wl-muted);
    font-size: 11px;
    letter-spacing: 0.22em;
    line-height: 1;
    text-transform: none;
}

.eyebrow--left {
    margin-left: 0;
}

/* ---- Type --------------------------------------------------------------------------- */

.page-title {
    margin: 0 0 14px;
    color: var(--wl-heading);
    font-size: clamp(27px, 5vw, 38px);
    font-weight: 300;
    line-height: 1.25;
}

.page-lede {
    max-width: var(--wl-measure);
    margin: 0 0 30px;
    color: var(--wl-muted);
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--wl-muted);
    font-size: 14px;
}

.back-link:hover {
    color: var(--wl-timber);
}

.empty {
    margin: 0;
    padding: 26px 0 6px;
    color: var(--wl-muted);
}

/*
 * «Αυτό το σεμινάριο έγινε τότε και τελείωσε.»
 *
 * The one sentence on a finished date's page, and the reason that page answers 200 instead of
 * 404. It has to read as a statement of fact rather than as an error: a red alert box would
 * tell a parent she did something wrong, when all that happened is that she tapped a link
 * from July in October. Hence the timber rule and the tinted ground, the same pair the rest
 * of the site uses for quiet emphasis, not the warning colours.
 */
.notice {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-left: 2px solid var(--wl-timber);
    background: var(--wl-tint, #f6f2ec);
    color: var(--wl-heading);
    font-size: 15px;
    line-height: 1.5;
}

/* ---- Photograph + offset sheet ------------------------------------------------------ */

.band {
    --photo-height: clamp(230px, 44vw, 440px);

    position: relative;
    margin-bottom: 60px;
}

.band__photo {
    width: 100%;
    height: var(--photo-height);
    object-fit: cover;
}

/*
 * A scrim across the foot of every photograph.
 *
 * The white sheet carries no border and no shadow, because the live site's does not. That
 * works there because their photographs are dark where a card lands; ours are pale sanded
 * ash and bare workshop wall, and the sheet dissolved into them — the title read as floating
 * text with no edge. Darkening the photograph is invisible as a device, where a border or a
 * drop shadow would be visibly not-the-brand.
 *
 * Height is bound to --photo-height rather than `inset: 0`, because the band box also
 * contains the sheet where it overhangs on a phone: a full-box scrim would tint the white
 * sheet grey, since ::after is the last child and paints over a positioned sibling.
 */
.band::after,
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--photo-height);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 58%);
    pointer-events: none;
}

/*
 * Mobile: the sheet rides up over the bottom of the photograph rather than sitting beside
 * it, which is what the live site does at 390px.
 */
/* z-index lifts the sheet above the scrim pseudo-element, which paints after it. */
.band__sheet {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    margin: -52px auto 0;
    padding: 24px 22px 26px;
    background: var(--wl-sheet);
}

.band__title {
    margin: 0 0 10px;
    color: var(--wl-timber);
    font-size: clamp(21px, 3.2vw, 27px);
    font-weight: 400;
    line-height: 1.3;
}

.band__meta {
    margin: 0 0 14px;
    color: var(--wl-muted);
    font-size: 14px;
}

.band__text {
    max-width: var(--wl-measure);
    margin: 0;
    color: var(--wl-muted);
    font-size: 15px;
}

/* The soonest date, the one line on a listing band a parent actually scans for. */
.band__when {
    margin: 0 0 12px;
    color: var(--wl-heading);
    font-size: 17px;
    font-weight: 700;
}

.band__when--none {
    color: var(--wl-muted);
    font-weight: 400;
}

.band__more {
    margin: 12px 0 0;
    color: var(--wl-muted);
    font-size: 13px;
}

.band:hover .band__title {
    color: var(--wl-timber-deep);
}

/* The detail page's head band is not a link and carries a back-link, so it needs the room. */
.band--head {
    margin-bottom: 48px;
}

/* ---- Photo strip -------------------------------------------------------------------- */

/*
 * The booking page's photograph. Short on purpose: the parent has already decided by the
 * time they reach this page, and a tall hero would push the first field off a phone screen.
 */
.strip__photo {
    width: 100%;
    height: clamp(120px, 22vw, 200px);
    object-fit: cover;
    margin-bottom: 30px;
}

/* ---- Hero --------------------------------------------------------------------------- */

/*
 * position: relative is load-bearing, not tidiness. On wide screens .hero__sheet is
 * absolutely positioned, so without it the sheet resolves against the viewport, escapes the
 * hero entirely and lands on top of the eyebrow below.
 */
.hero {
    --photo-height: clamp(290px, 52vw, 540px);

    position: relative;
    margin-bottom: 54px;
}

.hero__photo {
    width: 100%;
    height: var(--photo-height);
    object-fit: cover;
}

.hero__sheet {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 620px;
    margin: -70px auto 0;
    padding: 28px 24px 30px;
    background: var(--wl-sheet);
}

/* ---- Desktop ------------------------------------------------------------------------ */

@media (min-width: 60rem) {
    .wl__masthead {
        padding: 20px 40px;
    }

    .wl__logo {
        height: 52px;
    }

    .band__sheet,
    .hero__sheet {
        position: absolute;
        right: 6%;
        bottom: 40px;
        width: min(46%, 520px);
        max-width: none;
        margin: 0;
        padding: 36px 38px 38px;
    }

    /* Alternating side, the way the live Workshop page alternates down the page. */
    .band--left .band__sheet {
        right: auto;
        left: 6%;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .back-link,
    .wl__footer-link {
        transition: color 120ms ease;
    }
}