/* src/assets/css/club-storefront.css
   Club storefront pages — the motoring broadsheet treatment.
   Big serif, hairline rules, generous air. Racing green stays the anchor;
   space and scale do the selling, not boxes.
   Theming arrives as CSS custom properties on .sf (inline, from build data);
   the defaults below are the CCC neutrals used by unclaimed pages. */

.sf {
  --club-primary: #09484A;
  --club-primary-dark: #062f31;
  --club-accent: #b9a05c;
  --club-on-primary: #ffffff;
  --club-on-accent: #111111;

  --sf-frame: 1200px;
  --sf-gutter: clamp(1.25rem, 4vw, 2rem);
  --sf-section: clamp(3.25rem, 7vw, 5.75rem);
  --sf-wash: color-mix(in srgb, var(--club-primary) 4%, #ffffff);

  background: var(--paper);
  color: var(--ink-700);
}

.sf-frame {
  max-width: var(--sf-frame);
  margin: 0 auto;
  padding-left: var(--sf-gutter);
  padding-right: var(--sf-gutter);
}

.sf-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--club-primary);
  margin: 0 0 0.9rem;
}

/* Breadcrumbs sit quietly above the hero */
.sf-crumbs { padding-top: 1rem; padding-bottom: 1rem; }
.sf-crumbs .breadcrumbs { margin: 0; font-family: var(--font-display); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Hero — full bleed, bottom anchored, one confident headline
   -------------------------------------------------------------------------- */
.sf-hero { position: relative; min-height: clamp(420px, 60vh, 640px); display: flex; align-items: flex-end; }
.sf-hero-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
  background-color: var(--club-primary-dark);
}
.sf-hero-media.sf-hero-engraved {
  background-image:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 16px),
    radial-gradient(120% 90% at 50% 0%, var(--club-primary) 0%, var(--club-primary-dark) 78%);
}
.sf-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,9,9,.10) 30%, rgba(5,9,9,.42) 62%, rgba(5,9,9,.78) 100%);
}
.sf-hero-media.sf-hero-engraved + .sf-hero-overlay { background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.28) 100%); }

.sf-hero-content {
  position: relative; width: 100%; max-width: var(--sf-frame); margin: 0 auto;
  padding: 4.5rem var(--sf-gutter) clamp(1.75rem, 4vw, 2.75rem);
  display: flex; align-items: flex-end; gap: 2rem 3rem; flex-wrap: wrap;
}
.sf-hero-ident { display: flex; align-items: flex-end; gap: 1.5rem; min-width: 0; flex: 1 1 32rem; }

.sf-logo {
  width: clamp(84px, 9vw, 108px); height: clamp(84px, 9vw, 108px); border-radius: 50%; object-fit: cover;
  border: 2px solid var(--club-accent); box-shadow: 0 6px 18px rgba(0,0,0,.45); background: #fff; flex: none;
}
.sf-logo.sf-logo-free { border-radius: 0; object-fit: contain; background: transparent; border: none; filter: drop-shadow(0 5px 12px rgba(0,0,0,.5)); }
.sf-monogram {
  width: clamp(76px, 8vw, 96px); height: clamp(76px, 8vw, 96px); border-radius: 50%; border: 2px solid var(--club-accent);
  display: flex; align-items: center; justify-content: center; flex: none;
  font-family: "EB Garamond", Georgia, serif; font-size: clamp(2.1rem, 3vw, 2.6rem); color: #f0e9d6;
  background: rgba(255,255,255,.07);
}
.sf-meta {
  color: var(--club-accent); font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 0.7rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.sf-title {
  font-family: "EB Garamond", Georgia, serif; font-weight: 550;
  font-size: clamp(2.5rem, 5.6vw, 4.25rem); color: #ffffff; line-height: 1.02;
  letter-spacing: -0.015em; margin: 0; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.sf-tagline {
  color: rgba(255,255,255,.88); font-family: "EB Garamond", Georgia, serif; font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin: 0.7rem 0 0;
}
.sf-ctas { margin-left: auto; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sf-btn {
  display: inline-block; padding: 0.95rem 1.7rem; font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none; text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}
.sf-btn-primary { background: var(--club-accent); color: var(--club-on-accent); }
.sf-btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.sf-btn-ghost { border: 1px solid rgba(255,255,255,.72); color: #fff; background: rgba(0,0,0,.12); }
.sf-btn-ghost:hover { background: rgba(255,255,255,.14); text-decoration: none; }

/* Gentle entrance, silenced globally by the reduced-motion rule in reskin.css */
@keyframes sf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sf-hero-ident, .sf-ctas { animation: sf-rise 0.65s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.sf-ctas { animation-delay: 0.1s; }

/* Signature double rule */
.sf-rule { border: 0; border-bottom: 3px double var(--club-accent); margin: 0; }

/* Managed strip — the dateline */
.sf-managed { border-bottom: 1px solid var(--line-200); }
.sf-managed-inner {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
  font-family: var(--font-display); font-size: 0.8rem; color: var(--ink-500);
}
.sf-managed-inner strong { color: var(--club-primary); font-weight: 700; }

/* --------------------------------------------------------------------------
   Sections — hairline-ruled bands with generous air
   -------------------------------------------------------------------------- */
.sf-band {
  max-width: var(--sf-frame); margin: 0 auto;
  padding: var(--sf-section) var(--sf-gutter);
}
.sf-band + .sf-band { border-top: 1px solid var(--line-200); }

.sf-label {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--club-primary);
  border-bottom: 1px solid var(--line-200); padding-bottom: 0.7rem; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.sf-label .sf-label-aside { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 0.82rem; color: var(--ink-500); }
.sf-label .sf-label-aside a { color: var(--club-primary); }

/* About — asymmetric editorial spread */
.sf-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem clamp(3rem, 7vw, 6rem); align-items: start; }
.sf-main { min-width: 0; }
.sf-side { min-width: 0; }

.sf-about { font-family: "EB Garamond", Georgia, serif; font-size: 1.1875rem; line-height: 1.75; color: var(--ink-700); max-width: 62ch; }
.sf-about p { margin: 0 0 1.1rem; }
.sf-about p:first-of-type { font-size: clamp(1.3rem, 2vw, 1.5rem); line-height: 1.55; color: var(--ink-900); }
.sf-about ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.sf-about li { margin-bottom: 0.45rem; }

.sf-contacts {
  display: flex; gap: 0.9rem 1.75rem; flex-wrap: wrap; margin-top: 2rem;
  border-top: 1px solid var(--line-200); padding-top: 1.25rem;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.sf-contacts a { color: var(--club-primary); text-decoration: none; }
.sf-contacts a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Quick facts as broadsheet numerals */
.sf-stats { display: flex; gap: clamp(2rem, 4vw, 3.25rem); margin-bottom: 2.25rem; }
.sf-stat-num {
  display: block; font-family: "EB Garamond", Georgia, serif; font-weight: 550;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem); line-height: 1.05; color: var(--ink-900); letter-spacing: -0.01em;
}
.sf-stat-key {
  display: block; margin-top: 0.45rem; font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500);
}

/* Particulars — an open ruled list, no box */
.sf-particulars { border-top: 3px double var(--club-accent); padding-top: 1.1rem; }
.sf-particulars h2 {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--club-primary); margin: 0 0 0.4rem; line-height: 1.2;
}
.sf-parts-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line-100);
}
.sf-parts-row:last-child { border-bottom: none; }
.sf-parts-row .k {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-500); flex: none; padding-top: 0.2rem;
}
.sf-parts-row > span:last-child { font-family: "EB Garamond", Georgia, serif; font-size: 1.1rem; color: var(--ink-900); text-align: right; }
.sf-parts-row a { color: var(--club-primary); text-decoration: none; }
.sf-parts-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Join side panel — the club's colours, worn properly */
.sf-join { background: var(--club-primary); color: var(--club-on-primary); padding: 1.9rem 1.8rem; }
.sf-join h2 {
  font-family: "EB Garamond", Georgia, serif; font-weight: 550; font-size: 1.45rem;
  color: var(--club-accent); margin: 0 0 0.7rem; letter-spacing: -0.01em;
}
.sf-join p { font-family: "EB Garamond", Georgia, serif; font-size: 1.02rem; line-height: 1.65; margin: 0 0 0.6rem; }
.sf-join .sep { border-top: 1px solid color-mix(in srgb, var(--club-accent) 40%, transparent); margin: 1rem 0; }
.sf-join a { color: inherit; }

/* Corrections notice — fine print, not a box */
.update-notice { margin-top: 2rem; border-top: 1px solid var(--line-200); padding-top: 1.1rem; }
.update-notice p { font-family: var(--font-display); font-size: 0.84rem; line-height: 1.6; color: var(--ink-500); margin: 0; }
.update-notice a { color: var(--club-primary); }

/* --------------------------------------------------------------------------
   Noticeboard
   -------------------------------------------------------------------------- */
.sf-post { border-bottom: 1px solid var(--line-200); padding: 1.75rem 0; max-width: 62rem; }
.sf-post:first-of-type { padding-top: 0.25rem; }
.sf-post:last-child { border-bottom: none; padding-bottom: 0; }
.sf-post-title { font-family: "EB Garamond", Georgia, serif; font-weight: 550; font-size: clamp(1.35rem, 2vw, 1.6rem); color: var(--ink-900); margin: 0; letter-spacing: -0.01em; }
.sf-post-meta { font-family: var(--font-display); font-size: 0.78rem; color: var(--ink-500); margin-top: 0.4rem; }
.sf-post-body { font-family: "EB Garamond", Georgia, serif; font-size: 1.125rem; line-height: 1.7; margin-top: 0.8rem; max-width: 62ch; }
.sf-reply { margin: 1rem 0 0 1.25rem; border-left: 2px solid var(--club-accent); padding: 0.4rem 1.1rem; font-family: "EB Garamond", Georgia, serif; font-size: 1.02rem; line-height: 1.6; }
.sf-reply .who { font-family: var(--font-display); font-size: 0.74rem; color: var(--ink-500); }
.sf-reply-form { background: var(--sf-wash); border: 1px solid var(--line-200); padding: 1.4rem 1.5rem; margin-top: 1rem; max-width: 34rem; }
.sf-reply-form .form-group { margin-bottom: 1rem; }
.sf-reply-form label {
  display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); margin-bottom: 0.4rem;
}
.sf-reply-form input, .sf-reply-form textarea {
  width: 100%; border: 1px solid var(--line-200); background: #fff; padding: 0.75rem 0.85rem;
  font-family: "EB Garamond", Georgia, serif; font-size: 1.05rem;
}
.sf-reply-form input:focus, .sf-reply-form textarea:focus { border-color: var(--club-primary); outline: none; }
.sf-toast {
  background: var(--club-primary); color: var(--club-on-primary);
  font-family: var(--font-display); font-size: 0.88rem;
  padding: 0.8rem 1.1rem; margin: 0 0 1.25rem;
}

/* --------------------------------------------------------------------------
   Events — ruled columns, no boxes
   -------------------------------------------------------------------------- */
.sf-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.5rem 2.5rem; }
.sf-event-card { border-top: 1px solid var(--ink-900); padding: 1.1rem 0 0.4rem; }
.sf-event-date {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--club-primary); margin: 0;
}
.sf-event-card h3 { font-family: "EB Garamond", Georgia, serif; font-weight: 550; font-size: 1.3rem; line-height: 1.25; margin: 0.5rem 0 0.3rem; color: var(--ink-900); }
.sf-event-card p { font-family: var(--font-display); font-size: 0.82rem; color: var(--ink-500); margin: 0; }

/* --------------------------------------------------------------------------
   Gallery — big plates
   -------------------------------------------------------------------------- */
.sf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0.6rem; }
.sf-gallery img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
.sf-gallery-more {
  background: var(--club-primary); color: var(--club-on-primary); display: flex; aspect-ratio: 4 / 3;
  align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Enquiry — one flat, generous band. The funnel gets the best room in the house.
   -------------------------------------------------------------------------- */
.sf-enqband { background: var(--sf-wash); border-top: 1px solid var(--line-200); border-bottom: 1px solid var(--line-200); }
.sf-enquiry { padding-top: var(--sf-section); padding-bottom: var(--sf-section); }

.sf-enquiry .club-enquiry { max-width: none; margin: 0; padding: 0; background: transparent; border: 0; }
.sf-enquiry .club-enquiry-title {
  font-family: "EB Garamond", Georgia, serif; font-weight: 550;
  font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.015em;
  color: var(--club-primary); margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem); max-width: 24ch; text-wrap: balance;
}
.sf-enquiry .club-enquiry form { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.sf-enquiry .club-enquiry form > * { grid-column: 2; min-width: 0; }
.sf-enquiry .club-enquiry form > .club-enquiry-intro {
  grid-column: 1; grid-row: 1 / span 12;
  font-family: "EB Garamond", Georgia, serif; font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.7; color: var(--ink-700); margin: 0;
}
.sf-enquiry .form-group { margin-bottom: 1.4rem; }
.sf-enquiry .club-enquiry .form-group label {
  display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-700); margin-bottom: 0.45rem;
}
.sf-enquiry .club-enquiry input[type="text"],
.sf-enquiry .club-enquiry input[type="email"],
.sf-enquiry .club-enquiry textarea {
  width: 100%; border: 1px solid var(--line-200); background: #fff; border-radius: 0;
  padding: 0.9rem 1rem; font-family: "EB Garamond", Georgia, serif; font-size: 1.1rem; color: var(--ink-900);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.sf-enquiry .club-enquiry input:focus,
.sf-enquiry .club-enquiry textarea:focus {
  border-color: var(--club-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-primary) 14%, transparent);
  outline: none;
}
.sf-enquiry .club-enquiry-consent {
  display: flex; gap: 0.7rem; align-items: flex-start; margin: 1.5rem 0;
  font-family: var(--font-display); font-size: 0.875rem; line-height: 1.55; color: var(--ink-500);
}
.sf-enquiry .club-enquiry-consent input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--club-primary); }
.sf-enquiry .club-enquiry-error { font-family: var(--font-display); font-size: 0.9rem; }
.sf-enquiry .club-enquiry .button.button-primary {
  background: var(--club-primary); border-color: var(--club-primary); color: var(--club-on-primary);
  padding: 1rem 2.4rem; font-size: 0.8rem; letter-spacing: 0.12em; min-width: 0;
}
.sf-enquiry .club-enquiry .button.button-primary:hover { filter: brightness(1.15); }
.sf-enquiry .club-enquiry-footnote {
  margin-top: 1.75rem; border-top: 1px solid var(--line-200); padding-top: 1.1rem;
  font-family: var(--font-display); font-size: 0.84rem; line-height: 1.6; color: var(--ink-500);
}
.sf-enquiry .club-enquiry-success { font-family: "EB Garamond", Georgia, serif; font-size: 1.35rem; line-height: 1.6; color: var(--club-primary); max-width: 34rem; }

/* --------------------------------------------------------------------------
   Claim band — the one high-contrast moment on an unclaimed page
   -------------------------------------------------------------------------- */
.sf-claimband { background: var(--club-primary-dark); color: #fff; }
.sf-claim {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 2rem clamp(2.5rem, 6vw, 5rem);
  padding-top: clamp(2.75rem, 5vw, 4rem); padding-bottom: clamp(2.75rem, 5vw, 4rem);
}
.sf-claim-kicker {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--club-accent); margin: 0 0 0.9rem;
}
.sf-claim h2 {
  font-family: "EB Garamond", Georgia, serif; font-weight: 550;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 0.9rem; text-wrap: balance;
}
.sf-claim p { font-family: "EB Garamond", Georgia, serif; font-size: 1.125rem; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0; max-width: 56ch; }
.sf-claim p strong { color: #fff; }
.sf-claim .sf-claim-fine { margin-top: 0.9rem; font-family: var(--font-display); font-size: 0.82rem; color: rgba(255,255,255,.55); }
.sf-claim a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sf-claim-btn {
  background: var(--club-accent); color: var(--club-on-accent); white-space: nowrap;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 1.05rem 2rem; text-decoration: none;
  transition: filter 0.25s ease;
}
.sf-claim-btn:hover { filter: brightness(1.08); text-decoration: none; }

/* --------------------------------------------------------------------------
   Featured clubs footer band
   -------------------------------------------------------------------------- */
.sf-related { border-top: 1px solid var(--line-200); padding-top: var(--sf-section); padding-bottom: var(--sf-section); }
.sf-related-head h2 {
  font-family: "EB Garamond", Georgia, serif; font-weight: 550;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem); letter-spacing: -0.01em; color: var(--ink-900); margin: 0;
}
.sf-related-cta { text-align: center; margin-top: 2.5rem; }
.sf-related-cta .button { padding: 1rem 2.4rem; font-size: 0.8rem; letter-spacing: 0.12em; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .sf-cols { grid-template-columns: 1fr; gap: 3rem; }
  .sf-enquiry .club-enquiry form { display: block; }
  .sf-enquiry .club-enquiry-intro { margin-bottom: 2rem; }
  .sf-claim { grid-template-columns: 1fr; }
  .sf-claim-btn { justify-self: start; }
}

@media (max-width: 640px) {
  .sf-hero { min-height: clamp(380px, 68vh, 520px); }
  .sf-hero-ident { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .sf-ctas { margin-left: 0; width: 100%; }
  .sf-ctas .sf-btn { flex: 1 1 auto; }
  .sf-managed-inner { flex-direction: column; gap: 0.2rem; }
  .sf-stats { gap: 2.25rem; }
  .sf-gallery { grid-template-columns: repeat(2, 1fr); }
  .sf-enquiry .club-enquiry .button.button-primary { width: 100%; }
}