/* ============================================================
   Sinjemore — responsive.css
   Version: 1.0 — February 2026
   ============================================================ */

/* ------------------------------------------------------------
   Breakpoints:
   Tablet:  768px
   Desktop: 1024px
   Wide:    1280px
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Wide (1280px+)
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
  :root {
    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
  }
}

/* ------------------------------------------------------------
   Tablet and below (max 1023px)
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  :root {
    --section-padding: 48px 24px;
  }

  .container {
    padding: 0 24px;
  }

  .nav__inner {
    padding: 0 24px;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer {
    padding: 40px 24px 0;
  }

  .page-header {
    padding: 40px 24px 32px;
  }
}

/* ------------------------------------------------------------
   Mobile (max 767px)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --font-size-h1:   2rem;
    --font-size-h2:   1.5rem;
    --font-size-h3:   1.15rem;
    --section-padding: 40px 16px;
  }

  /* Container */
  .container {
    padding: 0 16px;
  }

  /* Navigation */
  .nav__inner {
    padding: 0 16px;
  }

  .nav__links {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__mobile-menu {
    padding: 16px 16px 24px;
  }

  /* Layout */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .amenities {
    grid-template-columns: 1fr;
  }

  /* Page Header */
  .page-header {
    padding: 32px 16px 24px;
  }

  /* Footer */
  .footer {
    padding: 40px 16px 0;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Map */
  .map-embed {
    height: 280px;
    border-radius: var(--radius-sm);
  }

  /* Buttons */
  .btn {
    width: 100%;
    text-align: center;
  }

  /* Section header */
  .section__header {
    margin-bottom: 28px;
  }

  /* Intro */
  .intro {
    grid-template-columns: 1fr;
  }

  .intro__image img {
    height: 280px;
  }

  /* About */
  .about-layout,
  .about-layout--reverse .about-layout__image {
    grid-template-columns: 1fr;
    order: 0;
  }

  .about-layout__image img {
    height: 260px;
  }

  .highlights {
    grid-template-columns: 1fr 1fr;
  }

  .highlights {
    grid-template-columns: 1fr;
  }

  /* Contact two-column → single */
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   Print
   ------------------------------------------------------------ */
@media print {
  .nav,
  .footer,
  .btn {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }
}

/* ============================================================
   CAROUSEL — RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .carousel__img            { height: 220px; }
  .carousel__img--enlarged  { height: 320px; }
  .carousel__btn            { width: 36px; height: 36px; font-size: 1.3rem; }
  .apt-detail__carousel .carousel__img           { height: 260px; }
  .apt-detail__carousel .carousel__img--enlarged { height: 380px; }
  .apt-detail__grid         { grid-template-columns: 1fr; gap: 32px; }
  .card__actions            { flex-direction: column; }
  .card__actions .btn       { width: 100%; text-align: center; }
}

@media (max-width: 1023px) {
  .nav__social { display: none; }
}