/* Block-section styles shared verbatim with the Stayant.Client editor preview (MSBuild copy). Keep chrome/site-wide rules in site.css. */

/* ── Hero Block ── */
.hero-block {
    position: relative;
    overflow: hidden;
}
.hero-title {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 400;
    opacity: .9;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero date picker */
.hero-datepicker-wrap {
    max-width: 700px;
}
.hero-search-form {
    background: rgba(255,255,255,.12);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(12px);
}
.hero-date-input {
    background: rgba(255,255,255,.95) !important;
    border: none !important;
    border-radius: .6rem !important;
    font-weight: 500;
    min-width: 160px;
    cursor: pointer;
}
.hero-search-btn {
    min-width: 140px;
    border-radius: .6rem;
}
.hero-cta-btn {
    border-radius: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: var(--transition);
}
.hero-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); }

/* Hero slideshow */
.hero-slideshow { overflow: hidden; }
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }

/* Hero YouTube iframe */
.hero-video-bg {
    pointer-events: none;
}
.hero-yt-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh; /* 16:9 based on height */
    height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    border: none;
}

/* Hero dots */
.hero-dots {
    display: flex;
    gap: .5rem;
    padding-bottom: .5rem;
}
.hero-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    border: 2px solid rgba(255,255,255,.7);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition);
}
.hero-dot.active { background: #fff; }

/* ────────────────────────────────────────────────────────────────────────────
   Hero layout variants (M2a) — emitted as `.hero-block.ws-variant-{left|split|
   card|minimal}` by BlockStyleCss.SectionClasses. `default` gets no class and is
   intentionally untouched below so it renders byte-identically to before.

   Colour handling:
   • Everything derives from palette tokens so light/dark flip automatically.
   • The Hero content hardcodes an inline `color:#fff` on the title/subtitle
     (white-on-image). `split`/`card`/`minimal` sit on a light surface / frosted
     panel, so their text must become `--color-text`. Inline styles can only be
     beaten by `!important`, so those overrides use it deliberately (specificity
     alone can't win against an inline attribute).
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Variant: left — keep the full-bleed image, left-align a narrower measure.
   The .container stays centered (so the text column lines up with the rest of
   the site content rather than hugging the viewport edge); only the text is
   left-aligned and constrained. Reverts to the centered default at ≤767.98px.
   The alignment declarations use !important because the content carries Bootstrap
   utilities that are themselves !important — .text-center on .hero-content,
   .mx-auto on .hero-datepicker-wrap, .justify-content-center on .hero-search-form
   — and !important beats non-!important regardless of specificity. ── */
@media (min-width: 768px) {
    .hero-block.ws-variant-left .hero-content { text-align: left !important; }
    .hero-block.ws-variant-left .hero-title,
    .hero-block.ws-variant-left .hero-subtitle { max-width: 46rem; margin-inline: 0 !important; }
    .hero-block.ws-variant-left .hero-datepicker-wrap { margin-inline: 0 !important; }
    .hero-block.ws-variant-left .hero-search-form { justify-content: flex-start !important; }
}

/* ── Variant: card — keep the image + overlay, float the content in a frosted
   glass panel. The panel uses the semi-opaque --color-card token so it frosts
   light in light mode / dark in dark mode; text switches to --color-text so it
   stays legible on that panel in both themes (white-on-white would be unreadable
   in light mode). --webkit-backdrop-filter keeps the blur working in WKWebView. */
.hero-block.ws-variant-card { padding-inline: 1rem; }
.hero-block.ws-variant-card .hero-content {
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 3.25rem) !important;
    background: color-mix(in srgb, var(--color-card) 82%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.hero-block.ws-variant-card .hero-title,
.hero-block.ws-variant-card .hero-subtitle {
    color: var(--color-text) !important;
    text-shadow: none;
}

/* ── Variant: split — solid --color-surface band (no full-bleed image), content
   left / framed image right. CSS hides the always-emitted background + overlay
   layers; the image is re-rendered as a real foreground element (.hero-split-
   media, guarded markup in Hero.cshtml). Grid: single column (stacked) on mobile,
   two columns ≥768px. d-flex/text-white Bootstrap utilities are !important, so the
   overrides that beat them are too. ── */
.hero-block.ws-variant-split {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    align-items: center;
    background: var(--color-surface);
    padding-inline: clamp(1.25rem, 6vw, 5rem);
}
.hero-block.ws-variant-split > .position-absolute { display: none; }   /* hide bg + overlay */
.hero-block.ws-variant-split .hero-content {
    color: var(--color-text) !important;
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
}
.hero-block.ws-variant-split .hero-title,
.hero-block.ws-variant-split .hero-subtitle {
    color: var(--color-text) !important;
    text-shadow: none;
}
.hero-block.ws-variant-split .hero-subtitle { margin-inline: auto; }
.hero-block.ws-variant-split .hero-split-media { width: 100%; }
.hero-block.ws-variant-split .hero-split-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
}
.hero-block.ws-variant-split .hero-split-frame--placeholder {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%);
}
/* Desktop: left-align the text half. !important is required because .hero-content
   carries Bootstrap's !important .text-center, .hero-datepicker-wrap carries
   .mx-auto, and .hero-search-form carries .justify-content-center. */
@media (min-width: 768px) {
    .hero-block.ws-variant-split { grid-template-columns: 1fr 1fr; }
    .hero-block.ws-variant-split .hero-content {
        text-align: left !important;
        margin-inline: 0;
    }
    .hero-block.ws-variant-split .hero-subtitle { margin-inline: 0 !important; }
    .hero-block.ws-variant-split .hero-datepicker-wrap { margin-inline: 0 !important; }
    .hero-block.ws-variant-split .hero-search-form { justify-content: flex-start !important; }
    .hero-block.ws-variant-split .hero-split-frame { aspect-ratio: 3 / 4; max-height: 34rem; }
}

/* ── Variant: minimal — no image; oversized type on a --color-surface band with
   an accent kicker rule above the title and generous section padding. The kicker
   is a pure-CSS ::before bar (no markup) tinted with the brand token. ── */
.hero-block.ws-variant-minimal {
    background: var(--color-surface);
}
.hero-block.ws-variant-minimal > .position-absolute { display: none; }  /* hide bg + overlay */
.hero-block.ws-variant-minimal .hero-content {
    color: var(--color-text) !important;
    padding-block: calc(var(--ws-section-pad) * 1.6) !important;
    max-width: 52rem;
}
.hero-block.ws-variant-minimal .hero-content::before {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin: 0 auto 1.5rem;
    border-radius: 2px;
    background: var(--color-primary);
}
.hero-block.ws-variant-minimal .hero-title {
    color: var(--color-text) !important;
    text-shadow: none;
    font-size: clamp(2.8rem, 9vw, 6rem);
    letter-spacing: -.04em;
}
.hero-block.ws-variant-minimal .hero-subtitle {
    color: var(--color-muted) !important;
    text-shadow: none;
    margin-inline: auto;
}

/* ── Datepicker legibility on light-surface / frosted variants ──
   The hero search form's labels + kicker carry Bootstrap's `.text-white-50`
   (white-on-image default), which is illegible on split's/minimal's light
   surface and card's light frosted panel. Recolour them to the muted token so
   they stay readable in both themes (own-element !important beats the inherited
   colour from .hero-content, so this must be applied to the labels directly). ── */
.hero-block.ws-variant-split   .hero-datepicker-wrap :is(.text-white-50, .form-label),
.hero-block.ws-variant-card    .hero-datepicker-wrap :is(.text-white-50, .form-label),
.hero-block.ws-variant-minimal .hero-datepicker-wrap :is(.text-white-50, .form-label) {
    color: var(--color-muted) !important;
}

/* MediaText block — image on one half, title/body/CTA on the other. Stacks
   vertically below the lg breakpoint with the image first regardless of
   ImageSide, since text-first on mobile would push the photo well below the
   fold. */
.media-text-block {
    position: relative;
}
.media-text-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: clamp(260px, 32vw, 520px);
    /* Defaults the tenant overrides per-block via inline custom properties on the
       grid element. Mobile stack ignores these (single column). */
    --media-image-width: 50%;
    --media-text-width: 50%;
}
@media (min-width: 992px) {
    .media-text-grid { grid-template-columns: var(--media-image-width) var(--media-text-width); }
    .media-text-block.is-image-right .media-text-image { order: 2; }
    .media-text-block.is-image-right .media-text-content { order: 1; }
}
.media-text-image {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    min-height: 280px;
}
.media-text-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-text-image--placeholder {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%);
}
.media-text-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
}
.media-text-content-inner {
    max-width: 540px;
    width: 100%;
}
.media-text-title {
    margin: 0 0 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.media-text-divider {
    width: 56px;
    height: 2px;
    border: 0;
    background: currentColor;
    opacity: .35;
    margin: 0 0 1.25rem;
}
.media-text-body {
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.media-text-body :is(h1, h2, h3, h4, h5, h6) { margin: 1.25rem 0 .5rem; }
.media-text-body p { margin: 0 0 1rem; }
.media-text-body ul, .media-text-body ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.media-text-body a { color: var(--color-primary); }
.media-text-cta {
    display: inline-block;
    padding: .75rem 1.75rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.media-text-cta.media-text-link {
    padding: 0;
    color: var(--color-primary);
    border-bottom: 2px solid currentColor;
}

/* FeatureList block — base "list/grid of features" used in both the minimal
   text-only mode and the card mode (image + title + body + optional CTA).
   The card variant is opt-in via cardStyle="card"; the body without that class
   stays as plain stacked text and preserves the existing behaviour. */
.feature-card {
    display: flex;
    flex-direction: column;
    border-radius: .75rem;
    overflow: hidden;
    background: var(--color-card);
    transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-surface);
}
.feature-card-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.feature-card-body {
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.feature-card.text-center .feature-card-body { align-items: center; }
.feature-card.text-start  .feature-card-body { align-items: flex-start; }
.feature-card-icon { font-size: 2.5rem; line-height: 1; margin-bottom: .5rem; }
.feature-card-title { margin: 0 0 .5rem; }
.feature-card-text { margin-bottom: 1rem; flex: 1; }
.feature-card-cta {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
}
.feature-card.text-start .feature-card-cta { align-self: flex-start; }
.feature-card-cta--link {
    color: var(--color-primary);
    text-decoration: underline;
    padding: .25rem 0;
}

/* Shadow variants — none / sm / md / lg. */
.feature-card--shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04); }
.feature-card--shadow-md { box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04); }
.feature-card--shadow-lg { box-shadow: 0 16px 40px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06); }
.feature-card--shadow-sm:hover,
.feature-card--shadow-md:hover,
.feature-card--shadow-lg:hover { transform: translateY(-2px); }

/* ── Columns Block ── */
.columns-block { }
.column-item { padding: 1rem; }
.column-title { font-size: 1.15rem; color: var(--color-text); }
.column-html p { color: var(--color-muted); line-height: 1.7; }
.column-html { font-size: .95rem; }

/* ── Feature List ── */
.feature-list-block { }
.feature-item-title { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.feature-item-text  { font-size: .9rem; color: var(--color-muted); }

/* ── Rich Text ── */
.rich-text-block .content-html {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
}
.rich-text-block .content-html h2 { font-size: 1.9rem; margin-top: 2rem; }
.rich-text-block .content-html h3 { font-size: 1.5rem; margin-top: 1.5rem; }
.rich-text-block .content-html a  { color: var(--color-primary); text-decoration: underline; }
.rich-text-block .content-html img { max-width: 100%; border-radius: .5rem; }

/* ── Divider Block ── */
.divider-block { display: flex; align-items: center; justify-content: center; }

/* ── Rooms Block (Phase 5c) ── */
/* Background/border/heading colours all flow from the palette tokens, so the
   card follows light/dark automatically (no per-theme overrides needed). */
.rooms-block .room-block-card {
    background: var(--color-card);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.65rem;
    padding: 1rem 1.1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rooms-block .room-block-card:hover {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 6px 20px rgba(37,99,235,.08);
}
.rooms-block .room-block-card h6 { color: var(--color-text); }
.rooms-block .room-book-btn { min-height: 44px; min-width: 44px; }

/* ── M1 style-envelope utilities (consumed from M2; inert until markup emits the classes) ──
   Dark handling follows the PR #325 two-selector pattern: tokens flip automatically, and
   any explicit dark rule gets both the attr selector and the media-query fallback, plus a
   [data-bs-theme="light"] counterpart so DarkMode=Off stays forced-light without JS. */
.ws-bg-surface { background: var(--color-surface); }
.ws-bg-tint    { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg)); }
.ws-bg-brand   { background: var(--color-primary); color: var(--color-on-primary); }
.ws-bg-dark    { background: #0f172a; color: #e2e8f0; }
[data-bs-theme="dark"] .ws-bg-dark { background: var(--color-card); }
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) .ws-bg-dark { background: var(--color-card); }
}
[data-bs-theme="light"] .ws-bg-dark { background: #0f172a; }

section[class*="ws-bg-"], div[class*="ws-bg-"] { padding-block: var(--ws-section-pad); }
.ws-width-narrow .container { max-width: 820px; }
.ws-width-full > .container { max-width: none; padding-inline: 0; }