/* =========================================
   COMPONENT NAME
   Purpose:
   - What this system does
   - Primary usage
   - Important behavior notes
========================================= */

.logo {
  width: auto;
}

/* =========================================
   EVENT DAY SELECTION GRID
   Purpose:
   - Layout system for selectable event-day options
   - Controls responsive button alignment
   - Used by pricing / estimator interfaces
========================================= */
.form-block {
    width: 100%;
}

.date-options {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px;
    width: 100%;
    align-items: stretch;
}


/* Main flex layout for header
   - Prevents wrapping
   - Even horizontal spacing
*/

/* =========================================
HEADER WRAPPER
========================================= */

#chateauHeader {
  width: 100%;
  position: relative;
  z-index: 50;
}

/* =========================================
TOP BAR
========================================= */

.chateau-topbar {
  width: 100%;
  background: var(--surface-accent);
  color: var(--text-inverse);
  padding: 10px 0;
}

/* INNER CONTAINER */

.chateau-inner {
  width: min(1400px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 220px 1fr 320px;
  gap: 20px;

  align-items: center;
}

/* =========================================
LEFT
========================================= */

.chateau-left img {
  max-width: 200px;
  height: auto;
  display: block;
}

/* =========================================
CENTER
========================================= */

.chateau-center {
  text-align: center;
}

.trust-line {
  margin-bottom: 6px;
}

/* =========================================
RIGHT
========================================= */

.chateau-right {
  text-align: right;
  width: 350px;
  background: var(--surface-soft);
}

.topbar-tagline {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* =====================================================
MICRO HERO
===================================================== */

.chateau-toggle {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
}
.chateau-microhero {      /* Row has a background */
  background: var(--surface-accent-light);   /* was #EBEBEB */
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: center;   /* horizontal centering */
  padding: 4px 20px 4px 20px;
}

.micro-inner {
  max-width: 1200px;
  padding: 4px 20px 4px 20px;
  text-align: center;
}
.micro-inner p {
  font-size: 14px;
  margin: 0;
}

/* =====================================================
   MAIN NAVIGATION BAR
===================================================== */

.chateau-menu {
  display: flex;
  justify-content: center;
  width: 100%;
}

.chateau-list {
  display: flex;
  align-items: center;

  gap: var(--space-5);

  list-style: none;
  margin: 0;
  padding: 0;
}

/* PARENT ITEM */
.has-dd {
  position: relative;
}

/* TOP LEVEL LINKS */
.chateau-list > li > a {
  display: inline-block;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}

/* DROPDOWN */
.dd {
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 220px;

  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);

  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);

  z-index: 1000;
}

/* SHOW ON HOVER */
.has-dd:hover .dd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* DROPDOWN LINKS */
.dd li a {
  font-size: 0.95rem;
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
}

.dd li a:hover {
  background: var(--surface-lavender-light);
  color: var(--brand-700);
}

/* ================================
   FORM GRID FIX (2-COLUMN RESTORE)
   ================================ */

/* Each column */
.form-half {
  flex: 1;
  min-width: 280px; /* prevents collapsing too early */
}

/* Labels spacing consistency */
.form-half label {
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}

/* =========================================
   OUTLINE / PILL BUTTON
========================================= */
/* used for pill, tab-btn, dagte-btn */
.btn--pill {
  background: var(--bg);
  border-color: var(--border-subtle);
  color: var(--text);
}

.btn--pill:hover {
  background: var(--brand-muted-second);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn--pill.is-active,
.btn--pill.active {
  background: var(--link-color);
  border-color: var(--link-color);
  color: var(--text-inverse);
}

/* LARGE CTA VARIANT */
.btn--lg {
  padding: 18px 34px;
  font-size: 1.1rem;
}

/* FULL WIDTH VARIANT */
.btn--block {
  width: 100%;
}

/* SUCCESS VARIANT (optional) */
.btn--success {
  background: linear-gradient(
    135deg,
    var(--success-500),
    var(--success-700)
  );

  color: white;
}

/* HOVER */

.tab-btn:hover,
.pill:hover {
    background: var(--brand-muted-second);
    border-color: var(--accent-dark);
    transform: translateY(-1px);
    text-align: center;
}

/* ACTIVE */

.tab-btn.is-active,
.pill.is-active,
.tab-btn.active,
.pill.active {

  background: var(--link-color);
  color: var(--text-inverse);
  border-color: var(--link-color);
}

/* ================================
   BAR ESTIMATOR (RESTORED STYLE)
   ================================ */

.bar-estimator-box {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Layout spacing control */
.bar-estimator-layout {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* spacing separators */
.bar-gap {
  height: 6px;
}

/* Results card */
.bar-result-card {
  margin-top: 10px;
  padding: 24px;
  border-radius: 14px;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Total headline */
.bar-total {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
  color: #111;
}

/* Grid layout */
.bar-grid-clean {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

/* Individual items */
.bar-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.bar-item-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
  margin-bottom: 6px;
}

.bar-item-number {
  font-size: 20px;
  font-weight: 600;
  color: #111;
}

.bar-item-sub {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

/* fallback list (mobile clarity) */
.bar-result-card ul {
  margin-top: 16px;
  padding-left: 18px;
  color: #444;
  font-size: 14px;
}

.bar-result-card ul li {
  margin-bottom: 6px;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 900px) {
  .bar-grid-clean {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .bar-grid-clean {
    grid-template-columns: 1fr;
  }

  .tab-btn {
    flex: 1;
    text-align: center;
  }
}

/* =========================================
   OPTION CARD COMPONENT
   Purpose:
   - Reusable selectable card UI
   - Supports hover and active states
   - Used for pricing, tabs, and option selection
========================================= */

.option-card {
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--bg);   /* was #fff */
  cursor: pointer;
  transition: 0.25s ease;
  position: relative; /* enables future absolute children (badges, icons) */
}

.option-card:hover {
  transform: translateY(-2px);
  background: var(--accent-soft);
}

.option-card.is-active {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: white;
  border-color: var(--accent-dark);
}

/* =========================
   DEFINE A FORM SYSTEM
========================= */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.form-block h3,
.form-block h4 {
  margin: 0;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: var(--space-2);
}
label {
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 8px;
}

/* =========================
   IMAGE / GALLERY SYSTEM
========================= */
.gallery {
  display: grid;
  gap: 16px;
}

.gallery-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-4 { grid-template-columns: repeat(4, 1fr); }

.media {
  overflow: hidden;
}

.media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* =========================
   IMAGE GRID (2-COLUMN LANDSCAPE)
   - Fixed 2-column layout
   - Prevents overflow with minmax(0,1fr)
========================= */


.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}


/* =========================================
   RESULT DISPLAY PANEL
   Purpose:
   - Highlighted summary/output container
   - Used for totals, calculations, and confirmations
========================================= */

.result-box {
  background: var(--surface-alt);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}

/* =========================
   MODERN DIVIDER STYLE
   - content placing tool for a solid line
========================= */

.section-divider {
  width: 100%;
  max-width: 1400px;
  height: 1px;
  /*background-color: var(--divider);*/  
  /*margin: 4rem auto;*/
  border-top: 1px solid var(--accent);
}

/* =========================================
   ESTIMATOR 2-COLUMN LAYOUT
========================================= */

.estimator-layout {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 32px;

    width: 100%;

    align-items: start;
}

.estimator-column {

    min-width: 0;
}

.estimator-tab {
  display: none;
}

.estimator-tab.is-active {
  display: block;
}

/* =========================================
   FORM CONTROL ELEMENTS
   Purpose:
   - Shared styling for sliders, counters, and selects
   - Maintains consistent input appearance
========================================= */

.guest-slider,
#guestCount {
  width: 100%;
  margin: 12px 0;
  height: 12px;
  border-radius: 6px;
  accent-color: var(--accent); /* was #d4af37 */
}

.guest-display-package,
#guestNumber {
  display: inline-block;
  margin-top: 5px;
  font-weight: bold;
}

.styled-select {
  min-height: 120px;
}

/* =========================================
   PAYMENT CTA BUTTON
   Purpose:
   - High-emphasis payment/action button
   - Used for checkout and payment-related actions
========================================= */

.pay-btn {
  display: inline-block;
  padding: 16px 34px;
  background: linear-gradient(135deg, var(--success-500), var(--success-700));
  color: white;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
}

.pay-btn:hover {
  transform: translateY(-2px);
}

/* =========================================
   DROPDOWN TRIGGER INDICATOR
   Purpose:
   - Marks navigation items containing dropdown menus
   - Adds visual dropdown arrow indicator
========================================= */

.has-dd {
  position: relative; 
}

.has-dd > a::after {
  content: " ▼";
  font-size: 0.7em;
}

/* =========================================
   RESPONSIVE MEDIA GRID
   Purpose:
   - Prevents image overflow
   - Normalizes responsive image scaling
   - Supports grid-based media layouts
========================================= */

.grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.grid > div {
  min-width: 0;
}

/* =========================================
   TWO-COLUMN CONTENT LAYOUT
   Purpose:
   - Responsive text/content column layout
   - Supports 2-column and 3-column content sections
========================================= */

.two-col-text {
  padding: 60px 20px;
}

.two-col-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.three-col .two-col-inner {
  grid-template-columns: repeat(3, 1fr);
}
.two-col-text h3 {
  margin-bottom: 12px;
}

.two-col-text p {
  margin-bottom: 14px;
  line-height: 1.6;
}

/* SCROLL TO TOP BUTTON */
.scroll-top-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface-accent);        /* was #499FAF */
  color: var(--text-inverse);    /* was #fff */
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 9999;
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
}

/* =========================================
   EYEBROW LABEL TEXT
   Purpose:
   - Small uppercase section label styling
   - Used above headings and content sections
========================================= */
p.eyebrow,
span.eyebrow,
.eyebrow {
  color: var(--eyebrow-color);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}
.eyebrow--caps {
  font-size: 0.9rem;  
  text-transform: uppercase;
}


/* =========================================
   MOBILE IMAGE GRID OVERRIDES
   Purpose:
   - Forces side-by-side image layouts on small screens
   - Improves mobile image comparison layouts
========================================= */
@media (max-width: 600px) {
  .checkmark {
    color: inherit;          /* matches text */
    font-weight: 700;        /* bolder */
    font-size: 1.1em;        /* slightly larger */
  }
}

/* pseudo elements */
.checkmark::before {
  content: "✓";
  color: inherit;
  font-weight: bold;
}

/* =========================================
   IMAGE CAPTION TEXT
   Purpose:
   - Caption and supporting description text for media
========================================= */
.image-caption {
    font-size: 90%;
    margin: 0px;
    letter-spacing: 0.2em;
}

.image-description {
	font-size: 80%;
}

/* =========================================
   TEXT CTA LINK
   Purpose:
   - Inline text-based call-to-action links
   - Animated underline hover interaction
========================================= */

.cta-link {
  color: var(--link-color);
  text-decoration: none;

  border-bottom: 2px dotted var(--link-color);

  transition:
    color 0.2s ease,
    border-bottom-color 0.2s ease,
    border-bottom-style 0.2s ease;
}

/* HOVER */

.cta-link:hover {
  color: var(--link-hover-color);

  border-bottom:
    2px solid var(--link-hover-color);
}

/* =========================================
   HERO LEAD TEXT
   Purpose:
   - Supporting text under main hero headline
   - Larger than body, softer than heading
========================================= */

.hero-lead {
  font-size: 1.25rem;              /* ~20px */
  line-height: 1.6;

  color: var(--color-text-secondary);

  max-width: 600px;               /* improves readability */
  margin-top: var(--space-3);
}

.hero-lead-plain {
  font-size: 1.25rem;              /* ~20px */
  line-height: 1.6;
  margin-top: var(--space-3);
}

/* =========================================
   AGREEMENT SUBMIT BUTTON
   Purpose:
   - Primary submit action for agreement/investment forms
   - Larger high-emphasis confirmation button
========================================= */
button.agreement-submit-btn {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface-accent);
    color: var(--text-inverse);    /* was #fff */
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    padding: 18px 34px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Hover */
button.agreement-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* PROGRESS BAR LAYOUT */
.progress-container {
  width: 100%;
  height: 6px;
  background: var(--bg);     /* was #e5e5e5 */
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: var(--bg-inverse);     /* was #000 */
  transition: width 0.4s ease;
}

/* =========================
   BASE FOOTER SYSTEM
========================= */

.footer {
  background: var(--footer-bg-100);   /* charcoal */
  color: var(--color-bg);          /* off-white text */
}
.footer-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-5);
}

.site-footer {
  background: var(--footer-bg-100);   /* charcoal */
  color: var(--footer-text);          /* off-white text */
  overflow-x: hidden;
}

/* =========================
   GLOBAL CONTAINER
========================= */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* CTA ROW LAYOUT
   - Uses flex to align text + button side-by-side
   - Equal width columns
*/

.footer-cta {
  padding: 40px 0 20px 0;
}

.footer-btn {
  display: inline-block;
  padding: 14px 22px;
  background: var(--link-button); /* was #c9a77c */
  color: var(--text-inverse);   /* was white */
  text-decoration: none;
  border-radius: 4px;
  margin-bottom: 12px; /* adds breathing room */
}
.footer-btn:hover {
  transform: translateY(-2px);
  background: var(--link-hover-color); /* added */
}
.footer-cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ✅ center horizontally */
  gap: 10px;
  text-align: center;    /* ensures text aligns too */
}

/* =========================
   MAIN GRID (3 COLUMN CONVERSION LAYOUT)
========================= */
/* switches to stacked layout on mobile */
/* FOOTER COLUMN GRID */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-col {
  min-width: 0;
}

/* TRUST COLUMN */
.footer-trust {
  border-right: 1px solid rgba(255,255,255,0.1);
  padding-right: 20px;
}

/* both top row footter sections in the same row */
.footer-cta-inner {
  padding: 0 20px;
  display: flex;
  /*flex-direction: column;*/      /* stack instead of side-by-side */
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;  
}

.footer-cta-text,
.footer-cta-action {
  flex: 1;             /* prevents stretching weirdly */
}

/* =========================
   LINKS
========================= */
.footer-col a {
  display: block;
  margin: 6px 0;
  color: var(--footer-text);  /* was #ddd */
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--text-inverse);    /* was #fff */
}

/* =========================
   CONTACT STRIP - a mobile-specific override for the contact strip
========================= */
.footer-contact-strip {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 25px 0;
  font-size: 14px;
  color: var(--footer-muted);    /* was #bbb */
}

/* CONTACT STRIP */
.footer-contact-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* FOOTER LAYOUT ONLY */
.site-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {

  .footer-trust {
    border-right: none;
    padding-right: 0;
  }

  .footer-contact-flex,
  .footer-cta-inner {
  flex-direction: column;
  text-align: center;
}
}

@media (max-width: 1024px) {
  .chateau-menu {
    display: block !important;
  }
}
@media (max-width: 1024px) {
  .chateau-list {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 900px) {  /* fixes vertical spacing on mobile only */

  .chateau-menu a {
    padding: 4px 8px;
  }

  .chateau-list {
    gap: 6px;
  }

}

/* Mobile */
@media (max-width: 768px) {

    .footer-contact-flex {
        align-items: center;
        gap: 8px;   /* controls vertical spacing */
    }

}

/* =========================
   LEGAL
========================= */
.footer-bottom {
  text-align: center;
  padding: 15px 0 20px;
  font-size: 13px;
  color: var(--muted);   /* was #999 */
}



/* =========================
   Desktop → 4 columns
Medium/small screens → 2 columns max
Extra-small phones → optionally 1 column
========================= */

/* Tablets and phones */
@media (max-width: 768px) {

    .site-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}
/* Keep 3-column desktop - switch to stacked layout on mobile - text and image columns */
@media (max-width: 768px) {

  .three-col .two-col-inner {
    grid-template-columns: 1fr;
  }

}

/* Mobile */
@media (max-width: 768px) {

    button.agreement-submit-btn {
        width: 100%;
        max-width: 420px;

        font-size: 1.15rem;
        padding: 18px 24px;
    }

}

/* Tablets + phones */
@media (max-width: 768px) {

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}
/* Very small phones */
@media (max-width: 480px) {

    .site-footer-grid {
        grid-template-columns: 1fr;
    }

}
@media (max-width: 600px) {
  .checkmark::before {
    font-size: 1.1em;
  }
}

/* =====================================================
   BREAKPOINT SYSTEM
=====================================================

1200px = Large desktop (not used yet)
900px  = Tablet
768px  = Mobile
600px  = Small mobile
480px  = Small mobile

===================================================== */
:root {
  --bp-tablet: 900px;
  --bp-mobile: 768px;
  --bp-mobile-sm: 600px;
  --bp-mobile-xs: 480px;
}
/* =====================================================
   TABLET
   900px and below
===================================================== */

@media (max-width: 900px) {

  /* =========================
     ESTIMATOR
  ========================= */

  .estimator-layout {
    grid-template-columns: 1fr;
  }

  /* =========================
     FOOTER
  ========================= */

  .footer-trust {
    border-right: none;
    padding-right: 0;
  }

  .footer-contact-flex,
  .footer-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  /* =========================
     MENU
  ========================= */


  .chateau-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .chateau-menu a {
    padding: 4px 8px;
  }

}

/* =====================================================
   MOBILE
   768px and below
===================================================== */

@media (max-width: 768px) {

  /* =========================
     FOOTER GRIDS
  ========================= */

  .site-footer-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* =========================
     FOOTER CONTACT
  ========================= */

  .footer-contact-flex {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  /* =========================
     CONTENT STACKING
  ========================= */

  .three-col .two-col-inner {
    grid-template-columns: 1fr;
  }

  /* =========================
     BUTTONS
  ========================= */

  button.agreement-submit-btn {
    width: 100%;
    max-width: 420px;
    font-size: 1.15rem;
    padding: 18px 24px;
  }

}

/* =====================================================
   SMALL MOBILE
   600px and below
===================================================== */

@media (max-width: 600px) {

  /* =========================
     CHECKMARKS
  ========================= */

  .checkmark::before {
    font-size: 1.1em;
  }

  /* =========================
     HEADER STACKING
  ========================= */

  .chateau-inner {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  align-items: center;
}

  .chateau-left,
  .chateau-center {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .chateau-right {
    display: none;
  }

}

/* =====================================================
   EXTRA SMALL PHONES
   480px and below
===================================================== */

@media (max-width: 480px) {

  .site-footer-grid {
    grid-template-columns: 1fr;
  }

}

/* =====================================================
   TOPBAR MOBILE/TABLET STACK
===================================================== */

@media (max-width: 900px) {

  .chateau-inner {
    display: flex;
    flex-direction: column !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }

  .chateau-left,
  .chateau-center,
  .chateau-right {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .chateau-right {
    display: none;
  }

}