/* =====================================================================
   Phones and tablets
   Breakpoints: 1024px (tablet landscape), 900px (tablet), 767px (phone),
   480px (small phone) — matching Elementor's own tablet/mobile stops so a
   client editing responsive values in the builder sees consistent results.
   ===================================================================== */

/* ---- mobile navigation (theme-owned; becomes a Pro nav widget later) ---- */
.mo-burger { display: none; width: 46px; height: 46px; border: 1px solid rgba(197,160,89,.5); border-radius: 12px; background: rgba(197,160,89,.1); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.mo-burger:hover { border-color: var(--mo-gold); }
.mo-burger__bars { display: block; width: 20px; }
.mo-burger__bars span { display: block; height: 1.5px; background: var(--mo-gold); border-radius: 2px; transition: transform .3s var(--mo-ease), opacity .2s ease; }
.mo-burger__bars span + span { margin-top: 5px; }
.mo-burger[aria-expanded="true"] .mo-burger__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mo-burger[aria-expanded="true"] .mo-burger__bars span:nth-child(2) { opacity: 0; }
.mo-burger[aria-expanded="true"] .mo-burger__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mo-nav__contact { display: none; }

@media (max-width: 900px) {
  .mo-burger { display: flex; }
  .mo-head__in { gap: 16px; }
  .mo-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #081420; border-bottom: 1px solid rgba(197,160,89,.35);
    padding: 8px 20px 20px;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .35s var(--mo-ease), visibility .35s;
  }
  .mo-head { position: sticky; }
  .mo-head__in { position: relative; }
  .mo-nav.is-open { max-height: 70vh; overflow-y: auto; visibility: visible; }
  .mo-nav a { padding: 16px 4px; font-size: 16px; border-bottom: 1px solid rgba(247,244,239,.1); min-height: 44px; display: flex; align-items: center; }
  .mo-nav a:last-child { border-bottom: 0; }
  .mo-nav a.is-current { border-bottom: 1px solid rgba(247,244,239,.1); padding-bottom: 16px; color: var(--mo-gold); }
  .mo-nav__contact { display: flex; }
}

/* ---- announcement bar: keep the phone number and socials, drop the long email ---- */
@media (max-width: 900px) {
  .mo-bar__in { justify-content: center; gap: 10px 18px; }
  .mo-bar { font-size: 12px; }
}
@media (max-width: 600px) {
  .mo-bar__email { display: none; }
  .mo-bar__live span:not(.mo-dot) { font-size: 11.5px; }
  .mo-bar__links { gap: 16px; }
}
@media (max-width: 380px) {
  .mo-bar__live { display: none; }
}

/* ---- section rhythm ---- */
@media (max-width: 1024px) {
  .mo-page .mo-sec { padding-block: 76px; padding-inline: 24px; }
  .mo-page .mo-sec--hero { padding: 72px 24px 170px; }
  .mo-page .mo-sec--page-hero { padding: 24px 24px 76px; }
  .mo-page .mo-panel { padding: 48px 36px; }
  .mo-page .mo-pad-lg { padding: 40px 32px; }
  .mo-page .mo-grid-2 { gap: 44px; }
  .mo-page .mo-overlap { margin-top: -110px; padding-inline: 24px; }
  .mo-page .mo-overlap--sm { padding-inline: 24px; }
}

@media (max-width: 767px) {
  .mo-page .mo-sec { padding-block: 56px; padding-inline: 20px; }
  .mo-page .mo-sec--hero { padding: 44px 20px 140px; }
  .mo-page .mo-sec--page-hero { padding: 20px 20px 56px; }
  .mo-page .mo-panel { padding: 32px 22px; border-radius: 20px; }
  .mo-page .mo-pad-lg { padding: 32px 22px; }
  .mo-page .mo-stack--card { padding: 30px 24px; }
  .mo-page .mo-grid, .mo-page .mo-grid-3, .mo-page .mo-grid-4, .mo-page .mo-grid-articles { grid-template-columns: 1fr; gap: 18px; }
  .mo-page .mo-grid-2 { grid-template-columns: 1fr; gap: 34px; }
  .mo-page .mo-overlap { margin-top: -100px; padding-inline: 20px; }
  .mo-page .mo-overlap--sm { margin-top: -26px; padding-inline: 20px; }
  .mo-page .mo-wrap { max-width: 100%; }
}

/* ---- type: keep long words inside narrow screens ---- */
@media (max-width: 767px) {
  .mo-page .mo-h1 .elementor-heading-title { font-size: clamp(32px, 9.5vw, 46px); line-height: 1.06; }
  .mo-page .mo-h1--home .elementor-heading-title { font-size: clamp(34px, 10.5vw, 52px); }
  .mo-page .mo-h2 .elementor-heading-title { font-size: clamp(26px, 7.2vw, 34px); line-height: 1.14; }
  .mo-page .mo-h3 .elementor-heading-title { font-size: 22px; }
  .mo-page .mo-lede .elementor-heading-title { font-size: 19px; }
  .mo-page .mo-intro p { font-size: 16.5px; }
  .mo-page .mo-body--lg p { font-size: 16px; }
  .mo-page .mo-body p { font-size: 14.5px; }
  .mo-page .mo-h1 .elementor-heading-title,
  .mo-page .mo-h2 .elementor-heading-title { overflow-wrap: break-word; }
  .mo-eyebrow, .mo-meta { letter-spacing: .18em; }
}

/* ---- buttons: full width on phones, always a 44px target ---- */
@media (max-width: 767px) {
  .mo-page .mo-btnrow { gap: 12px; }
  .mo-page .mo-btnrow > .elementor-widget { width: 100%; }
  .mo-page .mo-btn .elementor-button { width: 100%; justify-content: center; padding: 16px 24px; }
  .mo-page .mo-link .elementor-button { width: auto; justify-content: flex-start; min-height: 44px; align-items: center; }
  .mo-page .mo-btnrow--centre > .elementor-widget { width: 100%; }
}

/* ---- event rows stack cleanly ---- */
@media (max-width: 767px) {
  .mo-page .mo-row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
  .mo-page .mo-row > .elementor-widget-button { width: 100%; }
  .mo-page .mo-row .mo-btn--outline .elementor-button { width: 100%; justify-content: center; }
  .mo-date { width: 76px; padding: 10px 0; }
  .mo-date__day { font-size: 26px; }
  .mo-page .mo-rowbody { flex: 1 1 100%; }
}

/* ---- headings + count rows ---- */
@media (max-width: 600px) {
  .mo-page .mo-headrow { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- featured split panels: art on top, copy below ---- */
@media (max-width: 767px) {
  .mo-split-media { grid-template-columns: 1fr; }
  .mo-goldpanel--tall { min-height: 220px; }
  .mo-split-media > *:first-child { min-height: 220px; }
  .mo-goldpanel__title { font-size: clamp(22px, 8vw, 32px); }
}

/* ---- portrait frame: less tall on phones so the copy stays reachable ---- */
@media (max-width: 767px) {
  .mo-page .mo-frame { padding: 10px; border-radius: 18px; }
  .mo-frame__inner { aspect-ratio: 4 / 4.2; padding: 26px 24px; border-radius: 14px; }
  .mo-display { font-size: clamp(30px, 15cqw, 52px); }
}

/* ---- filter rail: bigger targets, edge-to-edge scroll ---- */
@media (max-width: 767px) {
  .mo-rail { padding: 12px 14px; border-radius: 999px; }
  .mo-pill { padding: 13px 20px; min-height: 46px; font-size: 13.5px; }
}

/* ---- forms stack, inputs reach the 44px target ---- */
@media (max-width: 767px) {
  .mo-form { flex-direction: column; align-items: stretch; }
  .mo-form input, .mo-form button { width: 100%; min-height: 50px; font-size: 16px; }
  .mo-form--search { max-width: 100%; }
}

/* ---- footer ---- */
@media (max-width: 767px) {
  .mo-foot { padding: 56px 20px 30px; }
  .mo-foot__grid { grid-template-columns: 1fr; gap: 34px; }
  .mo-foot__meta { margin-top: 38px; flex-direction: column; gap: 8px; }
}

/* ---- ambient glows scale down so they do not wash out small screens ---- */
@media (max-width: 767px) {
  .mo-glow::before { width: 360px; height: 360px; top: -6%; right: -18%; }
  .mo-glow--center::before { width: 460px; height: 460px; }
}

/* ---- tablet: 2-up card grids read better than 3-up ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .mo-page .mo-grid-3, .mo-page .mo-grid-4, .mo-page .mo-grid-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- iOS: stop form zoom, honour the safe area ---- */
@supports (-webkit-touch-callout: none) {
  .mo-form input { font-size: 16px; }
}
@media (max-width: 767px) {
  .mo-foot { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}


/* ---- mobile hero: portrait first, sized so the headline stays visible ---- */
@media (max-width: 767px) {
  .mo-sec--hero .mo-grid-2 { display: flex; flex-direction: column; gap: 26px; }
  .mo-sec--hero .mo-frame { order: -1; padding: 0; background: none; border: 0; }
  .mo-sec--hero .mo-frame__inner--photo { aspect-ratio: 4 / 3.4; border-radius: 16px; padding: 20px; }
  .mo-sec--hero .mo-portrait-slot .mo-portrait { object-position: 50% 16%; }
  .mo-sec--hero .mo-frame__inner--photo .mo-display { font-size: clamp(22px, 7vw, 30px); }
  .mo-sec--hero .mo-btnrow { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .mo-sec--hero .mo-btn { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
}