/* =============================================================================
   Section Size (admin option on every section: Normal / Compact / Large)
   -----------------------------------------------------------------------------
   _main.php wraps each section in  <div class="nd-sec nd-sec--normal|compact|large">.
   - Large   = the original full-size editorial design (no overrides here).
   - Normal  = medium, balanced spacing / headings / image heights (default).
   - Compact = smaller still, for dense pages.
   Rules are prefixed with .nd-sec--* so they outrank the styles inside each
   section template (those are printed later in the page with lower specificity).
   Covers: Panels (frames), Bento, Mosaic, Featured — plus content width for all.
   ============================================================================= */

/* ---------- Content width (all section types) ---------- */
@media (min-width: 1200px) {
  .nd-sec--normal  .container { max-width: 1140px; }
  .nd-sec--compact .container { max-width: 1040px; }
}

/* =============================== NORMAL ==================================== */

/* Vertical spacing */
.nd-sec--normal .frame-editorial,
.nd-sec--normal .bento-section,
.nd-sec--normal .mosaic-section,
.nd-sec--normal .sec-multicard { padding-top: clamp(2.75rem, 5vw, 4.5rem); padding-bottom: clamp(2.75rem, 5vw, 4.5rem); }

/* Headings */
.nd-sec--normal .frame-heading-lg,
.nd-sec--normal .mosaic-heading-lg,
.nd-sec--normal .section-heading-lg { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.nd-sec--normal .frame-heading-md,
.nd-sec--normal .mosaic-heading-md,
.nd-sec--normal .section-heading-md,
.nd-sec--normal .featured-heading   { font-size: clamp(1.45rem, 2vw, 1.95rem); }
.nd-sec--normal .card-title-md      { font-size: clamp(1.1rem, 1.3vw, 1.25rem); }

/* Image boxes (aspect-ratio tiles) — cap the height so tall ratios don't tower */
.nd-sec--normal .frame-editorial [class*="ratio-"],
.nd-sec--normal .mosaic-section  [class*="ratio-"],
.nd-sec--normal .bento-section   [class*="ratio-"],
.nd-sec--normal .sec-multicard   [class*="ratio-"] { max-height: 440px; }

/* Bento fixed heights */
.nd-sec--normal .bento-v1 .v1-img-1,
.nd-sec--normal .bento-v1 .v1-img-3,
.nd-sec--normal .bento-v1 .v1-img-4 { min-height: 210px; }
.nd-sec--normal .bento-v1 .v1-img-2 { min-height: 400px; }
.nd-sec--normal .bento-v2 .masonry-text-block { min-height: 200px; }
.nd-sec--normal .bento-v3 .sm-cell-1,
.nd-sec--normal .bento-v3 .sm-cell-3,
.nd-sec--normal .bento-v3 .sm-cell-4 { min-height: 210px; }
.nd-sec--normal .bento-v3 .sm-cell-2 { min-height: 420px; }
.nd-sec--normal .bento-v4 .mosaic-wall-v4 { grid-auto-rows: 170px; }
.nd-sec--normal .bento-v6 .courtyard-center-card { min-height: 320px; }

/* ============================== COMPACT ==================================== */

.nd-sec--compact .frame-editorial,
.nd-sec--compact .bento-section,
.nd-sec--compact .mosaic-section,
.nd-sec--compact .sec-multicard { padding-top: clamp(2rem, 3.5vw, 3rem); padding-bottom: clamp(2rem, 3.5vw, 3rem); }

.nd-sec--compact .frame-heading-lg,
.nd-sec--compact .mosaic-heading-lg,
.nd-sec--compact .section-heading-lg { font-size: clamp(1.6rem, 2.3vw, 2.15rem); }
.nd-sec--compact .frame-heading-md,
.nd-sec--compact .mosaic-heading-md,
.nd-sec--compact .section-heading-md,
.nd-sec--compact .featured-heading   { font-size: clamp(1.3rem, 1.7vw, 1.65rem); }
.nd-sec--compact .card-title-md      { font-size: clamp(1.02rem, 1.15vw, 1.12rem); }

.nd-sec--compact .frame-editorial [class*="ratio-"],
.nd-sec--compact .mosaic-section  [class*="ratio-"],
.nd-sec--compact .bento-section   [class*="ratio-"],
.nd-sec--compact .sec-multicard   [class*="ratio-"] { max-height: 340px; }

.nd-sec--compact .bento-v1 .v1-img-1,
.nd-sec--compact .bento-v1 .v1-img-3,
.nd-sec--compact .bento-v1 .v1-img-4 { min-height: 170px; }
.nd-sec--compact .bento-v1 .v1-img-2 { min-height: 320px; }
.nd-sec--compact .bento-v2 .masonry-text-block { min-height: 160px; }
.nd-sec--compact .bento-v3 .sm-cell-1,
.nd-sec--compact .bento-v3 .sm-cell-3,
.nd-sec--compact .bento-v3 .sm-cell-4 { min-height: 170px; }
.nd-sec--compact .bento-v3 .sm-cell-2 { min-height: 340px; }
.nd-sec--compact .bento-v4 .mosaic-wall-v4 { grid-auto-rows: 140px; }
.nd-sec--compact .bento-v6 .courtyard-center-card { min-height: 260px; }

/* ============================ RESPONSIVE =================================== */
/* Tablets: grids collapse in the templates; keep tiles a sensible size */
@media (max-width: 991.98px) {
  .nd-sec--normal .bento-v1 .v1-text-tile,
  .nd-sec--normal .bento-v1 .v1-img-1, .nd-sec--normal .bento-v1 .v1-img-2,
  .nd-sec--normal .bento-v1 .v1-img-3, .nd-sec--normal .bento-v1 .v1-img-4,
  .nd-sec--normal .bento-v3 .sm-cell-1, .nd-sec--normal .bento-v3 .sm-cell-2,
  .nd-sec--normal .bento-v3 .sm-cell-3, .nd-sec--normal .bento-v3 .sm-cell-4 { min-height: 240px; }
  .nd-sec--compact .bento-v1 .v1-text-tile,
  .nd-sec--compact .bento-v1 .v1-img-1, .nd-sec--compact .bento-v1 .v1-img-2,
  .nd-sec--compact .bento-v1 .v1-img-3, .nd-sec--compact .bento-v1 .v1-img-4,
  .nd-sec--compact .bento-v3 .sm-cell-1, .nd-sec--compact .bento-v3 .sm-cell-2,
  .nd-sec--compact .bento-v3 .sm-cell-3, .nd-sec--compact .bento-v3 .sm-cell-4 { min-height: 200px; }
  .nd-sec--normal  .bento-v4 .mosaic-wall-v4 { grid-auto-rows: 160px; }
  .nd-sec--compact .bento-v4 .mosaic-wall-v4 { grid-auto-rows: 130px; }
  .nd-sec--normal  .bento-v6 .courtyard-center-card { min-height: 280px; }
  .nd-sec--compact .bento-v6 .courtyard-center-card { min-height: 230px; }
}
/* Phones: images a touch shorter so one tile doesn't fill the screen */
@media (max-width: 575.98px) {
  .nd-sec--normal .frame-editorial [class*="ratio-"],
  .nd-sec--normal .mosaic-section  [class*="ratio-"],
  .nd-sec--normal .bento-section   [class*="ratio-"],
  .nd-sec--normal .sec-multicard   [class*="ratio-"] { max-height: 380px; }
  .nd-sec--compact .frame-editorial [class*="ratio-"],
  .nd-sec--compact .mosaic-section  [class*="ratio-"],
  .nd-sec--compact .bento-section   [class*="ratio-"],
  .nd-sec--compact .sec-multicard   [class*="ratio-"] { max-height: 300px; }
}

/* =============================================================================
   Other section types (Cards, Tabs, Gallery, Icons, Forms, Counter, Accordions,
   Blog Posts, Filtered cards, Iframe, Simple Text).
   These are already medium-sized, so Normal keeps them as they are;
   Compact tightens the spacing, Large makes it more generous.
   Hero is not touched here — it has its own "Height" setting in the admin.
   ============================================================================= */

/* ---------- Compact ---------- */
.nd-sec--compact .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.nd-sec--compact .uk-section { padding-top: 40px; padding-bottom: 40px; }
.nd-sec--compact .accordion-section { padding-top: 24px; padding-bottom: 24px; }
.nd-sec--compact .counter-section { padding-top: 28px; padding-bottom: 28px; }
.nd-sec--compact .full-section-wrapper { padding-top: 36px; padding-bottom: 36px; }
.nd-sec--compact .tabs-section { padding-top: 24px; padding-bottom: 24px; }
.nd-sec--compact .uk-margin-large-top { margin-top: 32px !important; }

/* ---------- Large ---------- */
.nd-sec--large .py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.nd-sec--large .uk-section { padding-top: 110px; padding-bottom: 110px; }
.nd-sec--large .accordion-section { padding-top: 72px; padding-bottom: 72px; }
.nd-sec--large .counter-section { padding-top: 80px; padding-bottom: 80px; }
.nd-sec--large .full-section-wrapper { padding-top: 96px; padding-bottom: 96px; }
.nd-sec--large .tabs-section { padding-top: 72px; padding-bottom: 72px; }
.nd-sec--large .uk-margin-large-top { margin-top: 96px !important; }
@media (min-width: 1200px) {
  .nd-sec--large .container { max-width: 1320px; }
}
@media (max-width: 767px) {
  .nd-sec--large .py-5 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .nd-sec--large .uk-section { padding-top: 70px; padding-bottom: 70px; }
}

/* =============================================================================
   Intro styles 1–5 (built medium-sized = Normal).
   Desktop only: on tablets/phones the intros already use their own mobile sizes.
   ============================================================================= */
@media (min-width: 1051px) {
  /* ---------- Compact ---------- */
  .nd-sec--compact .resort-intro,
  .nd-sec--compact .intro-panel-section,
  .nd-sec--compact .orbit-intro,
  .nd-sec--compact .cards-intro,
  .nd-sec--compact .stack-intro { padding-top: 40px; padding-bottom: 40px; }
  .nd-sec--compact .resort-intro__main-image-wrap { min-height: 440px; }
  .nd-sec--compact .resort-intro__secondary-image-wrap { height: 160px; }
  .nd-sec--compact .intro-panel__gallery { min-height: 360px; }
  .nd-sec--compact .intro-panel__main-image { height: 360px; }
  .nd-sec--compact .intro-panel__inset { height: 140px; }
  .nd-sec--compact .orbit-intro__gallery,
  .nd-sec--compact .stack-intro__gallery { min-height: 420px; }
  .nd-sec--compact .cards-intro__main-image { height: 360px; }
  .nd-sec--compact .cards-intro__card--top { height: 135px; }
  .nd-sec--compact .cards-intro__card--bottom { height: 115px; }

  /* ---------- Large ---------- */
  .nd-sec--large .resort-intro,
  .nd-sec--large .intro-panel-section,
  .nd-sec--large .orbit-intro,
  .nd-sec--large .cards-intro,
  .nd-sec--large .stack-intro { padding-top: 96px; padding-bottom: 96px; }
  .nd-sec--large .resort-intro__layout,
  .nd-sec--large .intro-panel,
  .nd-sec--large .orbit-intro__layout,
  .nd-sec--large .cards-intro__layout,
  .nd-sec--large .stack-intro__layout { max-width: 1400px; width: min(1400px, 100%); }
  .nd-sec--large .resort-intro__main-image-wrap { min-height: 700px; }
  .nd-sec--large .resort-intro__secondary-image-wrap { height: 280px; }
  .nd-sec--large .intro-panel__gallery { min-height: 560px; }
  .nd-sec--large .intro-panel__main-image { height: 560px; }
  .nd-sec--large .intro-panel__inset { height: 210px; }
  .nd-sec--large .orbit-intro__gallery,
  .nd-sec--large .stack-intro__gallery { min-height: 650px; }
  .nd-sec--large .cards-intro__main-image { height: 560px; }
  .nd-sec--large .cards-intro__card--top { height: 200px; width: 250px; }
  .nd-sec--large .cards-intro__card--bottom { height: 170px; width: 220px; }
}