/* Catalogue rhythms and the per-template structure that tokens cannot express.

   storefront-tokens.css decides what a template looks like; this file decides
   how it is arranged — which card spans two columns, where an arch or a rule
   is drawn, how an open booking panel reshapes the grid. */

/* ── Catalogue layouts ────────────────────────────────────────────────── */

/* Two wide cards open each cycle, then a row of three: a magazine rhythm that
   tiles cleanly whatever number of spaces a workspace publishes. */
[data-sf-layout="mosaic"] .sfp-grid { grid-template-columns: repeat(6, 1fr) }
[data-sf-layout="mosaic"] .sfp-card { grid-column: span 2 }
[data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 1), [data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 2) { grid-column: span 3 }
[data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 1) .sfp-media, [data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 2) .sfp-media { aspect-ratio: 16 / 10 }
[data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 1) h3, [data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 2) h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem) }

[data-sf-layout="list"] .sfp-grid { grid-template-columns: 1fr }
[data-sf-layout="list"] .sfp-card { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto; align-items: stretch }
[data-sf-layout="list"] .sfp-media { grid-row: 1 / span 2; height: 100%; aspect-ratio: auto; min-height: 280px }
[data-sf-layout="list"] .sfp-card-body { align-content: start; padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 }
[data-sf-layout="list"] .sfp-card-foot { padding: clamp(18px, 2vw, 28px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) }
[data-sf-layout="list"] .sfp-card-desc { -webkit-line-clamp: 4 }

[data-sf-layout="showcase"] .sfp-grid { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 96px) }
[data-sf-layout="showcase"] .sfp-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-rows: 1fr auto; align-items: center; border: 0; background: transparent; box-shadow: none; overflow: visible }
[data-sf-layout="showcase"] .sfp-media { grid-row: 1 / span 2 }
[data-sf-layout="showcase"] .sfp-card:nth-child(even) .sfp-media { order: 2 }
[data-sf-layout="showcase"] .sfp-media { aspect-ratio: 16 / 10; border-radius: var(--sf-radius) }
[data-sf-layout="showcase"] .sfp-card-body { padding: clamp(24px, 3vw, 46px) }
[data-sf-layout="showcase"] .sfp-card-body h3 { font-size: clamp(2rem, 3.6vw, 3.4rem) }
[data-sf-layout="showcase"] .sfp-card-foot { padding: 0 clamp(24px, 3vw, 46px) clamp(24px, 3vw, 46px) }
[data-sf-layout="showcase"] .sfp-card:hover { box-shadow: none }

/* An open booking panel takes over its row so the form never feels cramped. */
.sfp-grid .sfp-card:has(.sfp-book[open]) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch }
.sfp-grid .sfp-card:has(.sfp-book[open]) .sfp-media { height: 100%; min-height: 320px; aspect-ratio: auto; grid-row: 1 / span 2; order: -1 }
.sfp-grid .sfp-card:has(.sfp-book[open]) .sfp-card-body { padding-bottom: 0 }
.sfp-grid .sfp-card:has(.sfp-book[open]) .sfp-card-desc { -webkit-line-clamp: 2 }
.sfp-grid .sfp-card:has(.sfp-book[open]) .sfp-form-grid { grid-template-columns: 1fr 1fr }

@media (max-width: 1000px) {
    [data-sf-layout="mosaic"] .sfp-grid { grid-template-columns: repeat(2, 1fr) }
    [data-sf-layout="mosaic"] .sfp-card, [data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 1), [data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 2) { grid-column: span 1 }
    [data-sf-layout="list"] .sfp-card, [data-sf-layout="showcase"] .sfp-card, .sfp-grid .sfp-card:has(.sfp-book[open]) { display: flex; flex-direction: column }
    [data-sf-layout="list"] .sfp-media, [data-sf-layout="showcase"] .sfp-media, .sfp-grid .sfp-card:has(.sfp-book[open]) .sfp-media { min-height: 0; aspect-ratio: var(--sf-image-ratio) }
    [data-sf-layout="showcase"] .sfp-card:nth-child(even) .sfp-media { order: 0 }
}

@media (max-width: 760px) {
    [data-sf-layout="mosaic"] .sfp-grid { grid-template-columns: 1fr }
    [data-sf-layout="mosaic"] .sfp-card, [data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 1), [data-sf-layout="mosaic"] .sfp-card:nth-child(5n + 2) { grid-column: auto }
    [data-sf-template="riviera"] .sfp-media, [data-sf-template="riviera"] .sfp-card { border-radius: 220px 220px var(--sf-radius) var(--sf-radius) }
    [data-sf-template="atelier"] .sfp-grid { border-width: 2px 0 0 2px }
    [data-sf-template="editorial"] .sfp-hero::after, [data-sf-template="riviera"] .sfp-hero::after, [data-sf-template="bauhaus"] .sfp-hero::before { display: none }
}

/* ── Editorial: a ruled magazine spread ───────────────────────────────── */

[data-sf-template="editorial"] .sfp-hero::after { position: absolute; z-index: -1; right: -10rem; bottom: -13rem; width: 38rem; height: 38rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255, 255, 255, .05), 0 0 0 104px rgba(255, 255, 255, .035); content: '' }
[data-sf-template="editorial"] .sfp-head h2::after { display: block; width: 120px; height: 2px; margin-top: 22px; background: var(--sf-accent); content: '' }

/* ── Heritage: symmetry, small caps and gold rules ────────────────────── */

[data-sf-template="heritage"] .sfp-head { justify-items: center; margin-inline: auto; text-align: center }
[data-sf-template="heritage"] .sfp-head h2::after { display: block; width: 70px; height: 1px; margin: 22px auto 0; background: var(--sf-accent); box-shadow: 0 4px 0 var(--sf-accent); content: '' }
[data-sf-template="heritage"] .sfp-card-body { justify-items: center; text-align: center }
[data-sf-template="heritage"] .sfp-card-body h3 { font-size: clamp(1.7rem, 2.3vw, 2.3rem) }
[data-sf-template="heritage"] .sfp-card-kicker::before { display: none }
[data-sf-template="heritage"] .sfp-tags { justify-content: center }
[data-sf-template="heritage"] .sfp-btn { border-radius: 0; letter-spacing: .18em; font-size: .72rem; text-transform: uppercase }
[data-sf-template="heritage"] .sfp-book > summary { border-radius: 0; letter-spacing: .18em; font-size: .74rem; text-transform: uppercase }
[data-sf-template="heritage"] .sfp-filters button, [data-sf-template="heritage"] .sfp-search, [data-sf-template="heritage"] .sfp-tags li { border-radius: 0 }

/* ── Riviera: arches and a low sun ────────────────────────────────────── */

[data-sf-template="riviera"] .sfp-media { border-radius: 400px 400px var(--sf-radius-sm) var(--sf-radius-sm) }
[data-sf-template="riviera"] .sfp-card { padding: 10px; border-radius: 400px 400px var(--sf-radius) var(--sf-radius) }
[data-sf-template="riviera"] .sfp-card-body { padding-top: 18px; text-align: center; justify-items: center }
[data-sf-template="riviera"] .sfp-card-kicker::before { display: none }
/* The arch eats the top corners, so the overlays hang from the straight edge. */
[data-sf-template="riviera"] .sfp-badge { top: auto; bottom: 14px; left: 14px }
[data-sf-template="riviera"] .sfp-price { top: auto; bottom: 14px; right: 14px }
[data-sf-template="riviera"] .sfp-hero::after { position: absolute; z-index: -1; right: 8%; top: 14%; width: 12rem; height: 12rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 180, .85), rgba(255, 196, 120, .12) 70%); content: '' }
[data-sf-template="riviera"][data-sf-layout="list"] .sfp-media { border-radius: 400px var(--sf-radius-sm) var(--sf-radius-sm) 400px }

/* ── Minimal: hairlines only ──────────────────────────────────────────── */

[data-sf-template="minimal"] .sfp-grid { border-top: 1px solid var(--sf-line) }
[data-sf-template="minimal"] .sfp-card { border: 0; border-bottom: 1px solid var(--sf-line); border-radius: 0 }
[data-sf-template="minimal"] .sfp-card:hover { box-shadow: none; background: var(--sf-surface-2) }
[data-sf-template="minimal"] .sfp-card-body { padding-block: clamp(26px, 3vw, 44px) }
[data-sf-template="minimal"] .sfp-media { aspect-ratio: 5 / 4 }
[data-sf-template="minimal"] .sfp-badge, [data-sf-template="minimal"] .sfp-price { border-radius: 0 }
[data-sf-template="minimal"] .sfp-btn, [data-sf-template="minimal"] .sfp-book > summary, [data-sf-template="minimal"] .sfp-filters button, [data-sf-template="minimal"] .sfp-search, [data-sf-template="minimal"] .sfp-tags li { border-radius: 0 }
[data-sf-template="minimal"] .sfp-tags li { border: 0; border-left: 1px solid var(--sf-line); padding-block: 0 }

/* ── Nordic: air and pale wood ────────────────────────────────────────── */

[data-sf-template="nordic"] .sfp-hero { border-bottom-left-radius: var(--sf-radius-lg); border-bottom-right-radius: var(--sf-radius-lg) }
[data-sf-template="nordic"] .sfp-card-body { padding: clamp(24px, 2.4vw, 34px) }
[data-sf-template="nordic"] .sfp-ribbon li { padding-block: 32px }

/* ── Verdant: organic shapes ──────────────────────────────────────────── */

[data-sf-template="verdant"] .sfp-media { border-radius: var(--sf-radius) var(--sf-radius) 60px var(--sf-radius) }
[data-sf-template="verdant"] .sfp-card { padding: 9px }
[data-sf-template="verdant"] .sfp-hero::after { position: absolute; z-index: -1; left: -6rem; bottom: -8rem; width: 26rem; height: 26rem; border-radius: 48% 52% 40% 60% / 55% 40% 60% 45%; background: rgba(255, 255, 255, .06); content: '' }

/* ── Midnight: gold frames over low light ─────────────────────────────── */

[data-sf-template="midnight"] .sfp-hero::after { position: absolute; z-index: -1; inset: 26px; border: 1px solid color-mix(in srgb, var(--sf-accent) 34%, transparent); content: '' }
[data-sf-template="midnight"] .sfp-card { border-color: var(--sf-line) }
[data-sf-template="midnight"] .sfp-card:hover { border-color: color-mix(in srgb, var(--sf-accent) 46%, transparent) }
[data-sf-template="midnight"] .sfp-head h2::after { display: block; width: 90px; height: 1px; margin-top: 24px; background: var(--sf-accent); content: '' }
[data-sf-template="midnight"] .sfp-badge { background: rgba(0, 0, 0, .55); color: var(--sf-hero-ink) }

/* ── Metropolis: engineered grid ──────────────────────────────────────── */

[data-sf-template="metropolis"] .sfp-hero-media { background-image: linear-gradient(rgba(94, 230, 168, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 230, 168, .07) 1px, transparent 1px); background-size: 64px 64px }
[data-sf-template="metropolis"] .sfp-hero.has-image .sfp-hero-media { background-image: var(--sf-hero-image), linear-gradient(rgba(94, 230, 168, .07) 1px, transparent 1px); background-size: cover, 64px 64px }
[data-sf-template="metropolis"] .sfp-card::before { position: absolute; z-index: 2; top: 0; left: 0; width: 16px; height: 16px; border-top: 2px solid var(--sf-accent); border-left: 2px solid var(--sf-accent); opacity: 0; transition: opacity .25s; content: '' }
[data-sf-template="metropolis"] .sfp-card:hover::before { opacity: 1 }
[data-sf-template="metropolis"] .sfp-card-kicker { color: var(--sf-accent) }
[data-sf-template="metropolis"] .sfp-btn, [data-sf-template="metropolis"] .sfp-book > summary, [data-sf-template="metropolis"] .sfp-filters button, [data-sf-template="metropolis"] .sfp-search, [data-sf-template="metropolis"] .sfp-tags li { border-radius: 3px }
[data-sf-template="metropolis"] .sfp-eyebrow, [data-sf-template="metropolis"] .sfp-count { color: var(--sf-accent) }

/* ── Studio: the photograph is the page ───────────────────────────────── */

[data-sf-template="studio"] .sfp-card { border: 0; background: transparent }
[data-sf-template="studio"] .sfp-media { aspect-ratio: 3 / 2 }
[data-sf-template="studio"] .sfp-card-body { padding-inline: 0 }
[data-sf-template="studio"] .sfp-card-foot { padding-inline: 0 }
[data-sf-template="studio"] .sfp-grid { gap: clamp(48px, 7vw, 110px) }
[data-sf-template="studio"] .sfp-head h2 { font-size: clamp(2.6rem, 6vw, 5.4rem) }
[data-sf-template="studio"] .sfp-btn-primary { background: var(--sf-ink); color: var(--sf-bg); box-shadow: none }
[data-sf-template="studio"] .sfp-book > summary { background: var(--sf-ink); color: var(--sf-bg); box-shadow: none }
[data-sf-template="studio"] .sfp-price { background: rgba(0, 0, 0, .62); color: #fff; backdrop-filter: blur(8px) }

/* ── Atelier: hard edges and printed rules ────────────────────────────── */

[data-sf-template="atelier"] .sfp-grid { gap: 0; border: 2px solid var(--sf-ink); border-width: 2px 0 0 2px }
[data-sf-template="atelier"] .sfp-card { border-width: 0 2px 2px 0; border-radius: 0 }
[data-sf-template="atelier"] .sfp-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--sf-ink) }
[data-sf-template="atelier"] .sfp-card { transition: transform .2s, box-shadow .2s }
[data-sf-template="atelier"] .sfp-badge { border: 2px solid var(--sf-ink); border-radius: 0; background: var(--sf-surface); backdrop-filter: none }
[data-sf-template="atelier"] .sfp-price { border-radius: 0; box-shadow: 4px 4px 0 var(--sf-ink) }
[data-sf-template="atelier"] .sfp-head h2 { text-transform: uppercase }
[data-sf-template="atelier"] .sfp-hero::after { position: absolute; z-index: -1; inset: auto 0 0; height: 14px; background: repeating-linear-gradient(90deg, var(--sf-accent) 0 40px, transparent 40px 80px); content: '' }
[data-sf-template="atelier"] .sfp-ribbon li { border-right: 2px solid var(--sf-ink) }

/* ── Bauhaus: primary geometry ────────────────────────────────────────── */

[data-sf-template="bauhaus"] .sfp-hero::after { position: absolute; z-index: -1; right: 6%; top: 18%; width: 15rem; height: 15rem; border-radius: 50%; background: var(--sf-accent); opacity: .9; content: '' }
[data-sf-template="bauhaus"] .sfp-hero::before { position: absolute; z-index: -1; right: 20%; bottom: 0; width: 9rem; height: 9rem; background: #1b4bd8; content: '' }
[data-sf-template="bauhaus"] .sfp-card { border-radius: 0; border: 2px solid var(--sf-ink) }
[data-sf-template="bauhaus"] .sfp-card:hover { box-shadow: 9px 9px 0 var(--sf-accent) }
[data-sf-template="bauhaus"] .sfp-media { border-bottom: 2px solid var(--sf-ink) }
[data-sf-template="bauhaus"] .sfp-badge, [data-sf-template="bauhaus"] .sfp-price, [data-sf-template="bauhaus"] .sfp-tags li { border-radius: 0 }
[data-sf-template="bauhaus"] .sfp-btn, [data-sf-template="bauhaus"] .sfp-book > summary { border-radius: 0 }
[data-sf-template="bauhaus"] .sfp-fact { border-width: 2px }
[data-sf-template="bauhaus"] .sfp-fact:nth-child(3n + 2) { background: var(--sf-accent); color: var(--sf-accent-ink) }
[data-sf-template="bauhaus"] .sfp-fact:nth-child(3n + 2) span, [data-sf-template="bauhaus"] .sfp-fact:nth-child(3n + 2) small { color: inherit }

/* ── Sunset: mesh light and frosted glass ─────────────────────────────── */

[data-sf-template="sunset"] .sfp-hero-media { background-image: radial-gradient(at 18% 22%, #ff9a5a 0, transparent 52%), radial-gradient(at 82% 12%, #ff4f81 0, transparent 48%), radial-gradient(at 62% 88%, #7a3ff5 0, transparent 54%), linear-gradient(140deg, #f0603c, #922f7a) }
[data-sf-template="sunset"] .sfp-hero.has-image .sfp-hero-media { background-image: var(--sf-hero-image) }
[data-sf-template="sunset"] .sfp-card { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .62); backdrop-filter: blur(18px) saturate(1.3) }
[data-sf-template="sunset"] .sfp-fact { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .62); backdrop-filter: blur(18px) }
[data-sf-template="sunset"] .sfp-ribbon { background: rgba(255, 255, 255, .5) }
[data-sf-template="sunset"] .sfp-head h2 { background: linear-gradient(100deg, #f0603c, #922f7a); -webkit-background-clip: text; background-clip: text; color: transparent }