/**
 * Global responsive hardening — all devices
 * Breakpoints (aligned with staging Webflow):
 *   ≤991px  tablet
 *   ≤767px  mobile
 *   ≤479px  small phone
 */

/* —— Document shell —— */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  /* iOS notch / home indicator */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Prevent long words/URLs from blowing layout */
h1,
h2,
h3,
p,
.discover-card__title,
.materials__item-name,
.layout-card__name,
.footer__title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* —— Tablet type scale —— */
@media screen and (max-width: 991px) {
  :root {
    --fs-h1: 64px;
    --fs-h2: 40px;
    --lh-h2: 1.15;
    --fs-h3: 28px;
    --lh-h3: 1.2;
    --space-section: 72px;
  }

  .signature__title,
  .materials__title,
  .layouts__title,
  .amenities__title {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;
  }
}

/* —— Mobile type (tokens already set; reinforce) —— */
@media screen and (max-width: 767px) {
  :root {
    --fs-h1: 42px;
    --fs-h2: 32px;
    --lh-h2: 1.2em;
    --fs-h3: 24px;
    --lh-h3: 1.2em;
    --space-section: 56px;
  }

  /* iOS: inputs <16px zoom the page on focus (footer fields already 16px) */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .signature__title,
  .materials__title,
  .layouts__title,
  .amenities__title {
    font-size: 34px;
    line-height: 1.18;
    font-weight: 700;
  }
}

/* —— iPad / tablet portrait: use the extra width without desktop crowding —— */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero__inner {
    padding-inline: 32px;
  }

  /* Discover tablet sizing lives in discover.css to mirror Webflow lanes. */

  .signature__stage {
    height: min(520px, 58vw);
    min-height: 420px;
  }

  .materials__grid {
    gap: 14px;
  }

  .materials__item {
    height: 300px;
  }

  .layout-card {
    display: grid;
    grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
    min-height: 280px;
  }

  .layout-card__media {
    height: 100%;
    min-height: 280px;
  }

  .layout-card__body {
    justify-content: center;
  }

  .footer__form {
    max-width: 680px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 28px;
  }
}

/* Hero responsive rules live in hero.css (avoid conflicting overrides) */

/* —— Signature —— */
@media screen and (max-width: 991px) {
  .signature__thumbs {
    width: 100%;
    justify-content: flex-start;
  }

  .signature__arrow {
    width: 56px;
    font-size: 32px;
  }
}

@media screen and (max-width: 479px) {
  .signature__arrow {
    width: 44px;
    font-size: 28px;
  }
}

@media screen and (max-width: 767px) {
  .signature__stage {
    height: min(358px, 56vw);
    min-height: 200px;
  }
}

/* —— Materials —— */
/* Materials responsive rules live in materials.css */

/* —— Layouts —— */
@media screen and (max-width: 767px) {
  .layout-card__cta {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  .layout-card__top {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  .layout-card__area {
    white-space: nowrap;
  }

  .layout-card__media {
    height: min(240px, 56vw);
  }
}

/* —— Map —— */
@media screen and (max-width: 991px) {
  .map {
    height: min(660px, 70vh);
  }
}

@media screen and (max-width: 767px) {
  .map {
    height: min(460px, 55vh);
  }
}

@media screen and (max-width: 479px) {
  .map {
    height: min(360px, 50vh);
  }
}

/* —— Amenities —— */
@media screen and (max-width: 767px) {
  .amenities .container {
    gap: 28px;
    padding-bottom: 64px;
  }

  .amenities__grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    justify-content: center;
  }

  .amenity {
    width: auto;
    font-size: 16px;
    line-height: 1.3;
    padding: 14px 20px 14px 14px;
    gap: 12px;
    max-width: 100%;
    justify-content: center;
  }

  .amenity img {
    width: 36px;
    height: 36px;
  }
}

@media screen and (max-width: 479px) {
  .amenity {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    width: auto;
  }
}

/* —— Video —— */
@media screen and (max-width: 767px) {
  .video__head {
    padding-bottom: 24px;
  }

  .video__title {
    padding: 0 4px;
  }

  .video__frame {
    height: min(50vh, 360px);
    min-height: 200px;
  }
}

@media screen and (max-width: 479px) {
  .video__frame {
    height: min(36vh, 240px);
  }
}

/* —— Notes —— */
@media screen and (max-width: 991px) {
  .notes__card {
    min-height: 0;
  }

  .notes__quotes {
    max-width: 56px;
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .notes__card {
    height: 380px;
    min-height: 380px;
  }

  .notes__logo {
    max-width: 48vw;
  }

  .notes__quotes {
    top: 16px;
    right: 16px;
    width: 40px;
    max-width: 40px;
  }

  .notes__content {
    padding-right: 40px; /* clear quote mark */
  }
}

@media screen and (max-width: 479px) {
  .notes__card {
    height: 540px;
    min-height: 540px;
  }

  .notes__logo {
    left: 16px;
  }
}

/* Footer rules live in footer.css */

/* —— Header safe area when menu open —— */
@media screen and (max-width: 991px) {
  .site-header__nav {
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  }

  .site-header__inner {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

@media screen and (max-width: 767px) {
  .site-header__inner {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}