/*
  Velmora Casino Hotel — Responsive Exceptions
  Breakpoint-specific overrides layered on top of composition + modules.
*/

/* Small phones: tighten spacing, force single-column, avoid overflow */
@media (max-width: 480px) {
  .vl-shell {
    padding-inline: 1.1rem;
  }

  .vl-hero {
    min-height: 34rem;
  }

  .vl-hero-content[data-align="start"] {
    max-width: 100%;
  }

  .vl-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vl-hero-actions .vl-btn {
    text-align: center;
  }

  .vl-footer-base {
    flex-direction: column;
    align-items: flex-start;
  }

  .vl-cookiebar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .vl-cookiebar-actions {
    flex-direction: column;
  }

  .vl-cookiebar-actions .vl-btn {
    width: 100%;
    text-align: center;
  }

  .vl-form-grid[data-pairs="true"] {
    grid-template-columns: 1fr;
  }
}

/* Small / mid tablets */
@media (min-width: 481px) and (max-width: 767px) {
  .vl-suite-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet range */
@media (min-width: 768px) and (max-width: 1023px) {
  .vl-hero {
    min-height: 40rem;
  }

  .vl-columns[data-count="3"] {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* Small laptop */
@media (min-width: 1024px) and (max-width: 1365px) {
  .vl-shell {
    padding-inline: 2.25rem;
  }
}

/* Large desktop: keep line lengths readable, avoid pure stretch */
@media (min-width: 1440px) {
  .vl-lead,
  .vl-daycol p,
  .vl-suite-body p,
  .vl-divider-list dd,
  .vl-spec-list dd,
  .vl-faq-answer p {
    max-width: 46rem;
  }
}

@media (min-width: 1920px) {
  .vl-shell {
    max-width: 1500px;
  }
}

/* Landscape phones: cap hero height so content is reachable without scroll-jank */
@media (max-height: 480px) and (orientation: landscape) {
  .vl-hero {
    min-height: 30rem;
  }
}

/* Print: strip dark chrome for legal pages */
@media print {
  .vl-shell-header,
  .vl-cookiebar,
  .vl-footer {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}