/*
Theme Name: Maistra Sport Portfolio
Theme URI: https://maistrasport.dev/
Author: Maistra Hospitality Group
Description: Editorial dark-and-gold WordPress theme for the Maistra Sport Portfolio — football training camps, elite preparation programs and premium sport experiences across Istria and Zagreb. Fully editable from the WordPress admin (Customizer + custom content types).
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maistra-sport
Tags: one-column, custom-colors, custom-menu, featured-images, editor-style, sports, hospitality
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --ms-background: oklch(0.18 0.04 270);
  --ms-foreground: oklch(0.97 0.01 90);
  --ms-card: oklch(0.22 0.04 270);
  --ms-gold: oklch(0.78 0.1 75);
  --ms-gold-foreground: oklch(0.18 0.04 270);
  --ms-muted-foreground: oklch(0.75 0.02 90);
  --ms-border: oklch(0.4 0.04 270 / 50%);
  --ms-font-display: "Cormorant Garamond", Georgia, serif;
  --ms-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ms-container: 1400px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; border-color: var(--ms-border); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--ms-background);
  color: var(--ms-foreground);
  font-family: var(--ms-font-body);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ms-font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.15;
}

em { font-style: normal; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 999;
  width: auto; height: auto; clip: auto;
  background: var(--ms-gold); color: var(--ms-gold-foreground);
  padding: 0.75rem 1.25rem;
}

/* ==========================================================================
   Primitives
   ========================================================================== */
.ms-container { width: 100%; max-width: var(--ms-container); margin-inline: auto; padding-inline: 2rem; }

@media (min-width: 1400px) {
  .ms-container { padding-inline: 3rem; }
}
.ms-relative { position: relative; }
.ms-section { padding-block: 7rem; }
.ms-section--tinted { background-color: color-mix(in oklab, var(--ms-card) 30%, transparent); }
.ms-center { text-align: center; }
.ms-gold { color: var(--ms-gold); }

.ms-eyebrow {
  font-family: var(--ms-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ms-gold);
  font-weight: 500;
}

.ms-rule { display: block; width: 48px; height: 1px; background-color: var(--ms-gold); margin: 1.25rem auto; }

.ms-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 1rem;
  max-width: 48rem;
  margin-inline: auto;
}

.ms-lede {
  color: var(--ms-muted-foreground);
  max-width: 42rem;
  margin: 1.5rem auto 0;
  line-height: 1.75;
}

.ms-muted { color: var(--ms-muted-foreground); }
.ms-small { font-size: 0.875rem; }

.ms-list li { color: var(--ms-muted-foreground); font-size: 0.875rem; margin-bottom: 0.5rem; }

.ms-services-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 3rem;
  align-items: center;
}

.ms-services-panel {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.ms-services-panel h3 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  margin: 0;
  max-width: 44rem;
}

.ms-services-panel p {
  max-width: 40rem;
  color: var(--ms-muted-foreground);
}

.ms-services-list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ms-services-list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--ms-muted-foreground);
  font-size: 0.95rem;
  line-height: 1.8;
}

.ms-services-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--ms-gold);
}

.ms-services-visual {
  min-height: 520px;
}

.ms-editorial__media {
  position: relative;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}

.ms-editorial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-editorial__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ms-background), color-mix(in oklab, var(--ms-background) 30%, transparent), transparent);
}

@media (max-width: 960px) {
  .ms-services-grid {
    grid-template-columns: 1fr;
  }

  .ms-services-visual {
    min-height: 420px;
  }
}

.ms-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
}
.ms-btn--solid { background-color: var(--ms-gold); color: var(--ms-gold-foreground); }
.ms-btn--solid:hover { opacity: 0.9; }
.ms-btn--ghost { border: 1px solid var(--ms-gold); color: var(--ms-gold); }
.ms-btn--ghost:hover { background-color: var(--ms-gold); color: var(--ms-gold-foreground); }
.ms-btn--lg { padding: 1rem 2.5rem; letter-spacing: 0.3em; }

.ms-grid { display: grid; gap: 2rem; }
.ms-grid--2 { grid-template-columns: 1fr; }
.ms-grid--3 { grid-template-columns: 1fr; }
.ms-grid--4 { grid-template-columns: 1fr; }
.ms-grid--tight { gap: 1.5rem; }
.ms-mt-16 { margin-top: 4rem; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.ms-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background-color: color-mix(in oklab, var(--ms-background) 70%, transparent);
  border-bottom: 1px solid var(--ms-border);
}
.ms-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; gap: 1rem; }
.ms-brand { font-family: var(--ms-font-display); font-size: 1.125rem; letter-spacing: 0.25em; color: var(--ms-gold); }
.ms-brand { display: inline-block; white-space: nowrap; }
.ms-nav ul { display: none; gap: 1.25rem; flex-wrap: nowrap; }
.ms-nav a { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ms-muted-foreground); white-space: nowrap; }
.ms-nav a:hover { color: var(--ms-gold); }

.ms-header-top {
  width: 100%;
  border-bottom: 1px solid var(--ms-border);
  background: rgba(0, 0, 0, 0.04);
}

/* When logged in, WP admin bar pushes content; shift header down so top items are visible */
body.admin-bar .ms-header { top: 32px; }

/* Slightly lower the top switcher so it's visible under admin bar */
.ms-header-top { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Center the top switcher/menu */
.ms-header-top .ms-switcher { text-align: center; }
.ms-header-top .ms-switcher ul { display: flex; justify-content: center; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.ms-header-top .ms-switcher li { display: inline-block; }
.ms-header-top .ms-switcher a { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.85rem; color: var(--ms-gold); text-transform: uppercase; letter-spacing: 0.2em; border: 1px solid rgba(212,175,55,0.5); border-radius: 4px; background: transparent; }

.ms-header-top .ms-switcher { display: inline-block; padding: 0; border: none; }
.ms-header-top .ms-switcher a:hover, .ms-header-top .ms-switcher a:focus { background: rgba(212,175,55,0.06); color: var(--ms-gold); border-color: rgba(212,175,55,0.8); }
.ms-header-top .ms-container {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}
.ms-switcher {
  display: inline-flex;
}
.ms-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--ms-border);
  color: var(--ms-gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.65rem;
}
.ms-switcher a:hover {
  background: rgba(255,255,255,0.04);
}

.ms-nav-toggle {
  background: none; border: 1px solid var(--ms-border); color: var(--ms-gold);
  font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; cursor: pointer;
}
.ms-mobile-nav { display: none; border-top: 1px solid var(--ms-border); }
.ms-mobile-nav.is-open { display: block; }
.ms-mobile-nav ul { padding: 1rem 1.5rem 1.5rem; }
.ms-mobile-nav li { padding-block: 0.6rem; }
.ms-mobile-nav a { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ms-muted-foreground); }

/* ==========================================================================
   Hero
   ========================================================================== */
.ms-hero {
  position: relative;
  min-height: 680px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.ms-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--ms-background) 80%, transparent),
    color-mix(in oklab, var(--ms-background) 40%, transparent),
    var(--ms-background));
}
.ms-hero__title { font-size: clamp(2.75rem, 8vw, 6rem); line-height: 1.05; }
.ms-hero__text { margin: 2rem auto 0; max-width: 42rem; color: var(--ms-muted-foreground); font-size: 1rem; line-height: 1.75; }
.ms-hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ==========================================================================
   Cards
   ========================================================================== */
.ms-card { background-color: var(--ms-card); overflow: hidden; }
.ms-card__media { position: relative; height: 18rem; overflow: hidden; }
.ms-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.ms-card:hover .ms-card__media img { transform: scale(1.05); }
.ms-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ms-card), color-mix(in oklab, var(--ms-card) 30%, transparent), transparent);
}
.ms-card__name {
  position: absolute; bottom: 1.5rem; left: 0; right: 0;
  text-align: center; font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.3em; text-transform: uppercase;
}
.ms-card__title {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ms-card__body { padding: 2rem; text-align: center; }
.ms-card__tagline { color: var(--ms-gold); font-family: var(--ms-font-display); font-style: italic; font-size: 1.125rem; }

.ms-card__cta-wrap { margin-top: 1.25rem; text-align: center; }
.ms-card__cta {
  display: inline-block;
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ms-gold);
  color: var(--ms-gold);
  background: rgba(255,255,255,0.02);
  border-radius: 0.5rem;
}
.ms-card__cta:hover { background: rgba(255,255,255,0.03); }

.ms-landing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 4rem;
}

.ms-landing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 420px;
  background-color: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.ms-landing__card:hover {
  transform: translateY(-4px);
  border-color: var(--ms-gold);
}

.ms-landing__card--disabled {
  opacity: 0.85;
}

.ms-landing__card--placeholder {
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 0; /* allow the grid cell to collapse visually while preserving layout */
}

/* Landing-specific spacing to avoid header overlap */
.ms-section#landing {
  padding-block: 11rem 7rem;
}

.ms-landing__card a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ms-landing__card-media {
  position: relative;
  min-height: 260px;
  background-size: cover;
  background-position: center;
}

.ms-landing__card-media {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.ms-landing__card-body {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.ms-landing__card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.35) 100%);
}

.ms-landing__card-body {
  display: grid;
  gap: 1rem;
  padding: 1.8rem 1.5rem 2rem;
  margin-top: auto;
  background: linear-gradient(180deg, rgba(16,15,26,0.9), rgba(12,11,18,0.95));
}

.ms-landing__card-title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-gold);
}

.ms-landing__card-subtitle {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ms-muted-foreground);
}

.ms-landing__card-action {
  align-self: start;
  display: inline-flex;
  padding: 0.85rem 1.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border: 1px solid var(--ms-gold);
  color: var(--ms-gold);
  background: rgba(255,255,255,0.03);
}

.ms-landing__card-action--coming {
  color: var(--ms-foreground);
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
}

.ms-landing__card--disabled::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.35));
  z-index: 1;
}

@media (max-width: 980px) {
  .ms-landing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ms-landing__grid {
    grid-template-columns: 1fr;
  }
}

.ms-tile { text-align: center; padding: 2rem; border: 1px solid var(--ms-border); background-color: color-mix(in oklab, var(--ms-card) 40%, transparent); }
.ms-tile__num { color: var(--ms-gold); font-family: var(--ms-font-display); font-size: 1.875rem; }
.ms-tile h3 { font-size: 1.5rem; margin-bottom: 1rem; }

.ms-hotel {
  background-color: var(--ms-card);
  display: flex;
  flex-direction: column;
}
.ms-hotel__media { height: 14rem; overflow: hidden; }
.ms-hotel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.ms-hotel:hover .ms-hotel__media img { transform: scale(1.05); }
.ms-hotel__body {
  padding: 1.5rem;
  text-align: center;
  flex: 1;
}
.ms-hotel__body h3 { font-size: 1.25rem; }

/* Stats */
.ms-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; }
.ms-stat { padding: 1.5rem; border: 1px solid var(--ms-border); }
.ms-stat__num { font-family: var(--ms-font-display); font-size: 3rem; color: var(--ms-gold); }
.ms-stat__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ms-muted-foreground); margin-top: 0.5rem; }
.ms-infra-img { width: 100%; height: 480px; object-fit: cover; }

.ms-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; font-size: 0.875rem; color: var(--ms-muted-foreground); }
.ms-services div { padding-block: 0.75rem; border-top: 1px solid var(--ms-border); }

.ms-table-wrap { overflow-x: auto; margin-top: 3rem; }
.ms-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.ms-table th,
.ms-table td { padding: 0.95rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: left; font-size: 0.9rem; }
.ms-table th { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem; color: var(--ms-gold); }
.ms-table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Packages */
.ms-package { padding: 2rem; text-align: center; border: 1px solid var(--ms-border); background-color: color-mix(in oklab, var(--ms-card) 40%, transparent); }
.ms-package--featured { border-color: var(--ms-gold); background-color: var(--ms-card); }
.ms-package h3 { font-size: 1.5rem; }
.ms-package__where { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ms-muted-foreground); margin-top: 0.5rem; }
.ms-package__price { font-family: var(--ms-font-display); font-size: 3rem; color: var(--ms-gold); margin-top: 0.25rem; }
.ms-package ul { margin-top: 2rem; }

/* Events */
.ms-events { margin: 4rem auto 0; max-width: 48rem; }
.ms-event {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--ms-border); text-align: center;
}
.ms-event h3 { font-size: 1.5rem; }
.ms-event p { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--ms-gold); }

.ms-video-preview {
  margin: 4rem auto 0;
  max-width: 72rem;
  text-align: center;
}
.ms-video-preview__wrapper {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  border: 1px solid var(--ms-border);
  border-radius: 1rem;
  background: #000;
}
.ms-video-preview__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ms-video-preview__text {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--ms-muted-foreground);
}

/* F&B editorial */
.ms-editorial { position: relative; margin-top: 5rem; }
.ms-editorial__media { position: relative; height: 520px; overflow: hidden; }
.ms-editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.ms-editorial__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ms-background), color-mix(in oklab, var(--ms-background) 30%, transparent), transparent);
}
.ms-editorial__card {
  position: relative; margin: -6rem 1.5rem 0;
  background-color: var(--ms-background); border: 1px solid var(--ms-gold);
  padding: 2.5rem; text-align: center;
}
.ms-hours { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background-color: var(--ms-border); }
.ms-hours > div { background-color: var(--ms-background); padding: 1rem; }
.ms-hours span { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--ms-gold); display: block; }
.ms-hours strong { font-family: var(--ms-font-display); font-size: 1.125rem; font-weight: 400; display: block; margin-top: 0.25rem; }
.ms-hours em { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ms-muted-foreground); display: block; margin-top: 0.25rem; }

.ms-pillars { display: grid; grid-template-columns: 1fr; gap: 1px; background-color: var(--ms-border); margin-top: 6rem; }
.ms-pillar { background-color: var(--ms-background); padding: 2.5rem; text-align: center; }
.ms-pillar__num { font-family: var(--ms-font-display); font-size: 3rem; color: var(--ms-gold); }
.ms-pillar h4 { font-size: 1.25rem; margin-bottom: 0.75rem; }

.ms-brunch { margin-top: 7rem; }
.ms-brunch__title { font-size: clamp(2.25rem, 6vw, 3.75rem); margin-top: 1rem; }
.ms-brunch__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 4rem; }
.ms-brunch__tall img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.ms-brunch__menu { background-color: var(--ms-background); border: 1px solid var(--ms-border); padding: 2.5rem; }
.ms-brunch__menu ul { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
.ms-brunch__menu li { font-size: 0.875rem; color: var(--ms-muted-foreground); border-bottom: 1px solid color-mix(in oklab, var(--ms-border) 60%, transparent); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.ms-brunch__pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ms-brunch__pair > div { padding: 2rem; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.ms-brunch__pair .is-solid { background-color: var(--ms-gold); color: var(--ms-gold-foreground); }
.ms-brunch__pair .is-outline { border: 1px solid var(--ms-gold); }
.ms-brunch__pair strong { font-family: var(--ms-font-display); font-size: 1.875rem; font-weight: 400; }
.ms-brunch__pair span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; margin-top: 0.5rem; }
.ms-brunch__duo { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.ms-brunch__duo div { height: 20rem; overflow: hidden; }
.ms-brunch__duo img { width: 100%; height: 100%; object-fit: cover; }

.ms-beyond { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 7rem; }
.ms-beyond > div { text-align: center; padding: 1.5rem; border: 1px solid var(--ms-border); background-color: color-mix(in oklab, var(--ms-background) 40%, transparent); }
.ms-beyond h4 { font-size: 1.25rem; color: var(--ms-gold); }

/* Contact */
.ms-contact { position: relative; overflow: hidden; }
.ms-contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; }
.ms-contact__title { font-size: clamp(2.25rem, 6vw, 3.75rem); margin-top: 1rem; }
.ms-contact__grid { margin: 3rem auto 0; display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 48rem; }
.ms-contact__cell { padding: 1.5rem; border: 1px solid var(--ms-border); background-color: color-mix(in oklab, var(--ms-card) 60%, transparent); }
.ms-contact__cell p + p, .ms-contact__cell a { font-family: var(--ms-font-display); font-size: 1.25rem; margin-top: 0.75rem; display: block; }

/* Footer */
.ms-footer { padding-block: 2.5rem; border-top: 1px solid var(--ms-border); text-align: center; }
.ms-footer p + p { font-size: 0.75rem; color: var(--ms-muted-foreground); margin-top: 0.75rem; }

.ms-why-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

/* Variant to force a two-column layout inside split rows (left column of a 2-col row) */
.ms-why-grid.ms-why-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ms-why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem;
  border-radius: 0.75rem;
}

.ms-why-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ms-why-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ms-why-card p {
  margin: 0;
  color: var(--ms-muted-foreground);
  font-size: 0.95rem;
  line-height: 1.75;
}

@media (min-width: 768px) {
  .ms-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1.5rem; }
  .ms-why-grid.ms-why-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reduce the editorial image height in the Bike 'why' section so it visually matches the 2x2 left grid */
@media (min-width: 768px) {
  #why .ms-editorial__media { height: 520px; }
}

/* Generic pages / posts */
.ms-page { padding-block: 10rem 6rem; }
.ms-page h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.ms-page .entry-content { margin-top: 2rem; color: var(--ms-muted-foreground); line-height: 1.8; }
.ms-page .entry-content a { color: var(--ms-gold); }
.ms-page .entry-content h2, .ms-page .entry-content h3 { color: var(--ms-foreground); margin-top: 2rem; }
.ms-page .entry-content ul, .ms-page .entry-content ol { list-style: disc; padding-left: 1.25rem; margin: 1rem 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 640px) {
  .ms-brunch__menu ul { grid-template-columns: repeat(2, 1fr); }
  .ms-brunch__menu li { text-align: left; }
}

@media (min-width: 768px) {
  .ms-nav ul { display: flex; }
  .ms-nav-toggle, .ms-mobile-nav { display: none !important; }
  .ms-grid--2, .ms-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ms-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ms-pillars { grid-template-columns: repeat(3, 1fr); }
  .ms-services { grid-template-columns: repeat(3, 1fr); }
  .ms-event { flex-direction: row; text-align: left; }
  .ms-editorial__media { height: 640px; }
  .ms-editorial__card { position: absolute; left: 3rem; bottom: 3rem; max-width: 28rem; margin: 0; }
  .ms-brunch__grid { grid-template-columns: repeat(12, 1fr); }
  .ms-brunch__tall { grid-column: span 5; grid-row: span 2; }
  .ms-brunch__menu { grid-column: span 7; }
  .ms-brunch__pair { grid-column: span 7; }
  .ms-brunch__duo { grid-template-columns: repeat(2, 1fr); }
  .ms-beyond { grid-template-columns: repeat(2, 1fr); }
  .ms-contact__grid { grid-template-columns: repeat(3, 1fr); }
  .ms-infra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: center; }
  .ms-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}

@media (min-width: 1024px) {
  .ms-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ms-beyond { grid-template-columns: repeat(4, 1fr); }
}