/* Layout structure: header + main container (scoped to landing page)
   Ensures the header can have dynamic height and the main area fills the remaining viewport.
   This file centralizes structural rules and repeats them across media queries for clarity. */

/* Root flex layout: header + main-container (body has class 'puntilla-landing' in this template) */
body.puntilla-landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh; /* fallback */
  height: 100dvh; /* account for mobile UI chrome */
  overflow: hidden; /* single scroll area in main-content */
  background: var(--b1, #181818); /* ensure no white base shows through */
}

/* Header stays at the top; content scrolls below it */
body.puntilla-landing .puntilla-header {
  position: sticky;
  top: 0;
  z-index: 101;
}

/* Main container fills the rest below header */
body.puntilla-landing .main-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;   /* allow children to control scroll */
  overflow: hidden; /* prevent double scroll; delegate to .main-content */
}

/* Main content is the scroll container */
body.puntilla-landing .main-content,
body.puntilla-landing .main-content.full-width {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;

}

/*
  Responsive: The structural layout remains the same across breakpoints.
  We re-declare the key rules for maintainability and to guard against overrides.
*/
@media (max-width: 1024px) {
  body.puntilla-landing .main-container {
    display: flex;
    flex-direction: column;
  }
  body.puntilla-landing .main-content,
  body.puntilla-landing .main-content.full-width {
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  body.puntilla-landing {
    min-height: 100vh;
    height: 100dvh;
  }
  body.puntilla-landing .puntilla-header {
    position: sticky;
    top: 0;
  }
  body.puntilla-landing .main-container {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  body.puntilla-landing .main-content,
  body.puntilla-landing .main-content.full-width {
    overflow-y: auto;
  }
}