/* ═══════════════════════════════════════════════════════════════
   Yassas — Responsive Stylesheet
   responsive.css — linked after brand.css on every page
   Breakpoints: 1024px (tablet) · 768px (large phone) · 480px (small phone)
   ═══════════════════════════════════════════════════════════════ */

/* ── DESKTOP DEFAULT — hide mobile-only elements ─────────── */
.nav-hamburger { display: none; }

/* ── TABLET (≤1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {

  /* NAV */
  nav { padding: 0 24px; gap: 12px; }
  nav ul { gap: 12px; }
  nav ul li a { font-size: 9px; letter-spacing: 1px; }
  .nav-logo img { height: 42px; }

  /* FOOTER */
  footer { padding: 48px 40px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* GENERIC SECTION PADDING */
  .section,
  .venues-section, .how-section, .faq-section, .menu-section,
  .sig-section, .occasions-section, .why-section, .packages-section,
  .tnc-section, .enquiry-section, .feast-section, .story-split,
  .vision-section, .reviews-section, .events-strip, .milestones-section,
  .values-section, .locations-section, .dietary-section,
  .promos-section, .newsletter-section { padding: 56px 40px; }

  .cta-band { padding: 40px; }
  .yarra-section { padding: 48px 40px; }
  .order-section { padding: 40px; }

  /* HERO SECTIONS */
  .page-hero { padding: 56px 40px; }
  .hero-inner { gap: 40px; }

  /* HEADINGS */
  .sec-title { font-size: 34px; }
  .page-hero h1 { font-size: 42px; }

  /* GRIDS — 4col → 2col */
  .menu-grid,
  .loc-grid,
  .milestones-grid,
  .why-grid,
  .sig-grid { grid-template-columns: repeat(2, 1fr); }

  /* GRIDS — 3col → 2col */
  .promo-grid,
  .reviews-grid,
  .dietary-grid,
  .packages-grid,
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* VENUE FUNCTION GRID */
  .venue-fn-grid { grid-template-columns: 1fr 1fr; }

  /* LOCATIONS CARD */
  .venue-card { grid-template-columns: 1fr; }
  .vc-sidebar { border-right: none; border-bottom: 1px solid rgba(0,0,0,.06); }
  .vc-body { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* STORY */
  .story-split { grid-template-columns: 1fr; gap: 40px; padding: 56px 40px; }
  .story-split.reverse { direction: ltr; }
  .story-visual { min-height: 300px; }
  .vision-section { grid-template-columns: 1fr; }
  .vision-visual { min-height: 240px; }

  /* HERO SPLITS (locations, catering, etc.) */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right-facts,
  .hero-stat-cards,
  .hero-right-cards,
  .hero-stats { display: none; }

  /* FEASTS */
  .feast-grid { grid-template-columns: 1fr; }

  /* GIFT */
  .gift-inner { grid-template-columns: 1fr; gap: 32px; }

  /* WHATSON */
  .whatson-grid { grid-template-columns: 1fr; }
  .wo-grid { grid-template-columns: 1fr; }
  .wo-desc { -webkit-line-clamp: 3; }
  .wo-small-desc { -webkit-line-clamp: 2; }

  /* NEWSLETTER */
  .nl-inner { grid-template-columns: 1fr; gap: 32px; }

  /* CTA band */
  .cta-band { flex-direction: column; gap: 16px; text-align: center; }
  .cta-btns { justify-content: center; }

  /* OCCASIONS */
  .occasions-grid { grid-template-columns: 1fr; }

  /* HOW STEPS */
  .how-steps { grid-template-columns: repeat(2,1fr); }
  .how-steps::before { display: none; }

  /* ENQUIRY */
  .enq-inner { grid-template-columns: 1fr; }
  .enquiry-section .enq-inner,
  section[style*="grid-template-columns:1fr 1.5fr"] { 
    grid-template-columns: 1fr !important; 
  }

  /* YARRA */
  .yarra-inner { grid-template-columns: 1fr; }

  /* STATS ROW */
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(0,0,0,.07); padding-bottom: 16px; }

  /* MORE VENUES */
  .more-venues { grid-template-columns: 1fr; }
}

/* ── LARGE PHONE (≤768px) ─────────────────────────────────── */
@media (max-width: 768px) {

  /* NAV — hamburger */
  nav { padding: 0 20px; height: 60px; position: sticky; top: 0; z-index: 200; }
  nav ul { display: none; }
  nav ul.open {
    display: flex; flex-direction: column;
    position: fixed; top: 60px; left: 0; right: 0;
    background: var(--blue); padding: 20px;
    gap: 14px; z-index: 199; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  }
  nav ul li a { font-size: 12px; letter-spacing: 2px; padding: 8px 0; display: block; }
  .nav-logo img { height: 36px; }

  /* Hamburger button */
  .nav-hamburger {
    display: flex; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 8px; background: none; border: none;
  }
  .nav-hamburger span {
    display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px; transition: all .3s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  /* SECTION PADDING */
  .section,
  .venues-section, .how-section, .faq-section, .menu-section,
  .sig-section, .occasions-section, .why-section, .packages-section,
  .tnc-section, .enquiry-section, .feast-section, .story-split,
  .vision-section, .reviews-section, .events-strip, .milestones-section,
  .values-section, .locations-section, .dietary-section,
  .promos-section, .newsletter-section { padding: 48px 20px; }

  .cta-band { padding: 36px 20px; }
  .yarra-section { padding: 40px 20px; }
  .order-section { padding: 36px 20px; flex-direction: column; gap: 20px; }
  footer { padding: 40px 20px 20px; }

  .page-hero { padding: 48px 20px; }

  /* HEADINGS */
  .sec-title { font-size: 28px; }
  .page-hero h1 { font-size: 34px; }
  .cta-band h3 { font-size: 24px; }

  /* ALL GRIDS → 1 col */
  .menu-grid,
  .loc-grid,
  .milestones-grid,
  .why-grid,
  .sig-grid,
  .promo-grid,
  .reviews-grid,
  .dietary-grid,
  .packages-grid,
  .values-grid,
  .venue-fn-grid,
  .tnc-grid,
  .faq-grid,
  .dish-grid,
  .dish-grid-cat,
  .drinks-grid,
  .feast-grid,
  .events-grid,
  .hero-stat-cards,
  .hero-stats,
  .how-steps { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* LOCATIONS CARD */
  .vc-body { grid-template-columns: 1fr; }

  /* HERO SLIDER */
  .hero-slider { height: auto; min-height: 100svh; }
  .slide { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .slide-img { min-height: 260px; order: -1; }
  .slide-content { padding: 40px 20px; }
  .slide-headline { font-size: 36px; }
  .slide-counter { bottom: 16px; right: 20px; }

  /* VENUE TABS */
  .venue-tabs { padding: 0 20px; top: 60px; }
  .vtab { padding: 14px 16px; font-size: 9px; letter-spacing: 1px; }

  /* CAT NAV */
  .cat-nav { padding: 10px 20px; top: 110px; }
  .venue-panel { padding: 40px 20px; }

  /* FILTER BAR */
  .filter-bar { padding: 14px 20px; position: static; }
  .filter-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .filter-group { gap: 6px; }
  .filter-sep { display: none; }

  /* PDF BAR */
  .pdf-bar { flex-direction: column; gap: 12px; }
  .pdf-links { flex-wrap: wrap; }

  /* TRUST BAR */
  .trust-bar { padding: 16px 20px; }
  .trust-items { flex-direction: column; gap: 12px; align-items: flex-start; }
  .trust-sep { display: none; }

  /* DELIVERY BAR */
  .delivery-bar { padding: 12px 20px; flex-direction: column; gap: 10px; }
  .delivery-platforms { flex-wrap: wrap; gap: 8px; }

  /* CELEBRATE BAND */
  .celebrate-band { padding: 14px 20px; }
  .celebrate-items { flex-wrap: wrap; gap: 8px; justify-content: center; }

  /* PLATTER HERO */
  .platter-hero-card,
  .platter-hero { grid-template-columns: 1fr; }

  /* SOUTHBANK SOUV TOGGLE */
  .souv-toggle-bar { margin: 0 20px 8px; }

  /* MODAL */
  .modal { width: 95%; max-height: 90svh; overflow-y: auto; }
  .modal-body { padding: 20px; }
  .venue-select-grid { grid-template-columns: 1fr; }
  .modal-header { padding: 20px; }

  /* BOOKING HERO ON LOCATIONS */
  .hero-venue-pills { gap: 8px; }
  .hvp { padding: 6px 12px; font-size: 9px; }

  /* STORY STATS */
  .story-stats { grid-template-columns: 1fr 1fr; }

  /* WHATS ON HERO PROMO */
  .promo-hero { min-height: 280px; }
  .ph-title { font-size: 32px; }

  /* NEWSLETTER ROW */
  .nl-row { grid-template-columns: 1fr; }

  /* CTA BAND */
  .cta-band { flex-direction: column; text-align: center; }
  .cta-btns { flex-wrap: wrap; justify-content: center; }

  /* VENUE CARDS on locations */
  .hero-right-facts,
  .hero-stat-cards,
  .hero-right-cards,
  .hero-stats,
  .hero-right-quote { display: none; }

  /* STATS ROW */
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── SMALL PHONE (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {

  .sec-title { font-size: 24px; }
  .page-hero h1 { font-size: 28px; }
  .slide-headline { font-size: 28px; }

  .slide-content { padding: 28px 16px; }
  .slide-btns { flex-direction: column; gap: 10px; }
  .slide-btns .btn-gold,
  .slide-btns .btn-ob,
  .slide-btns .btn-outline-blue { width: 100%; text-align: center; }

  .hero-btns,
  .ph-btns,
  .vision-btns,
  .cta-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn-gold,
  .hero-btns .btn-ob,
  .hero-btns a,
  .hero-btns button,
  .ph-btns a,
  .vision-btns a,
  .cta-btns a,
  .cta-btns button { width: 100%; text-align: center; box-sizing: border-box; }

  .vtab { padding: 12px 10px; font-size: 8px; }
  .fpill { padding: 5px 10px; font-size: 8px; }

  .mv-form { flex-direction: column; }
  .mv-submit { width: 100%; }

  .story-stats { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ── NAV HAMBURGER JS ─────────────────────────────────────── */
/* Injected by nav.js at mobile widths */

/* VALUES SECTION */
@media (max-width: 1024px) {
  .values-inner { grid-template-columns: 1fr; gap: 40px; }
  .values-quote { font-size: 26px; }
}
@media (max-width: 768px) {
  .values-section { padding: 48px 20px; }
  .values-grid { grid-template-columns: 1fr; }
  .values-grid .values-card:last-child { grid-column: 1; }
  .values-quote { font-size: 22px; }
}

/* ── BLOG PAGE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .blog-hero      { padding: 56px 20px 40px; }
  .blog-filter    { padding: 0 16px; }
  .blog-section   { padding: 48px 20px; }
  .blog-grid      { grid-template-columns: 1fr; }
  .blog-card.featured { grid-column: span 1; }
  .blog-card.featured .bc-img  { height: 200px; }
  .blog-card.featured .bc-title { font-size: 20px; }
  .article-hero   { padding: 48px 20px 36px; }
  .article-title  { font-size: 28px; }
  .article-body   { padding: 40px 20px; }
  .related-section { padding: 40px 20px; }
  .related-grid   { grid-template-columns: 1fr; }
}

/* ── CONTENT AREA (contact, gallery) ─────────────────────── */
@media (max-width: 768px) {
  .content-area { padding: 40px 20px; }
}

/* ── SOCIAL STRIP (whats-on) ──────────────────────────────── */
@media (max-width: 768px) {
  .social-strip  { padding: 36px 20px; }
  .ss-inner      { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ss-btns       { flex-wrap: wrap; gap: 8px; }
}

/* ── WHATS-ON HERO ────────────────────────────────────────── */
@media (max-width: 768px) {
  .ph-content    { padding: 24px 20px; }
  .ph-title      { font-size: 28px; }
}

/* ── INLINE STYLE OVERRIDES (sections with hardcoded 72px padding) ── */
/* Targets sections where the padding is set via inline style attribute  */
@media (max-width: 768px) {
  .section-padded { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── DELIVERY BAR + ORDER PICKER ──────────────────────────── */
@media (max-width: 1024px) {
  .delivery-bar-inner { padding: 11px 40px; }
  .order-picker { padding: 20px 40px 24px; }
  .order-picker-venues { grid-template-columns: repeat(2,1fr); }
  .order-picker-close { right: 40px; }
}
@media (max-width: 768px) {
  .delivery-bar-inner {
    padding: 10px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .delivery-platforms { display: flex; gap: 8px; flex-wrap: wrap; }
  .order-picker { padding: 16px 16px 20px; }
  .order-picker-venues { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .order-picker-close { right: 16px; top: 16px; }
  .ovc-name { font-size: 13px; }
}
@media (max-width: 480px) {
  .order-picker-venues { grid-template-columns: 1fr 1fr; }
}

/* ── REVIEWS SECTION ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .reviews-layout { grid-template-columns: 220px 1fr; gap: 32px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .reviews-section { padding: 48px 20px; }
  .reviews-layout { grid-template-columns: 1fr; gap: 24px; }
  .reviews-summary { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px; }
  .rs-score { font-size: 48px; }
  .reviews-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .review-card { height: 200px; }
}
@media (max-width: 480px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card { height: auto; max-height: 180px; }
}

/* ── HUBSPOT FORMS — responsive fixes (applies to all pages) ── */
/*
  HubSpot injects its own class names (.hs-form, .form-columns-2 etc.)
  We target them here so every page benefits from one central fix.
*/
@media (max-width: 768px) {
  /* Collapse 2-column fieldsets to single column */
  .hs-form .form-columns-2 .hs-form-field,
  .hs-form-yassas .hs-form .form-columns-2 .hs-form-field {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
  /* Clear floats after collapsed fieldsets */
  .hs-form .form-columns-2 { overflow: hidden; }

  /* All inputs / selects / textareas fill their container */
  .hs-form input[type=text],
  .hs-form input[type=email],
  .hs-form input[type=tel],
  .hs-form input[type=number],
  .hs-form input[type=date],
  .hs-form select,
  .hs-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Submit button full-width on mobile */
  .hs-form .hs-button.primary,
  .hs-form input[type=submit] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Reduce wrapper padding so form doesn't feel cramped */
  .hs-form-yassas { padding: 24px 16px !important; }

  /* Catering + functions-venue bare form containers */
  #hs-catering-form,
  [id^="hs-form-"] { padding: 0 !important; }

  /* Catering enquiry section — collapse 2-col grid to 1-col */
  .cater-enq-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .cater-form-card { padding: 24px 16px !important; }

  /* Functions-venue enquiry form card */
  .fv-form-card { padding: 24px 16px !important; }
}

/* ── MOBILE BOOK A TABLE BAR ─────────────────────────────── */
@media (max-width: 768px) {
  #mobile-book-bar {
    display: block;
    position: sticky;
    top: 60px;
    z-index: 144;
    background: var(--gold);
    height: 44px;
    text-align: center;
    line-height: 44px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
  }
  /* Delivery bar sits tight under the nav on mobile */
  .delivery-bar {
    top: 60px !important;
  }
}