/* ============================================
   HEYDAY Senior Living — Responsive Styles
   ============================================ */

/* --- Mobile nav from tablet portrait down --- */
@media (max-width: 1100px) {
  .nav__overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(var(--rgb-charcoal), 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1000;
  }

  .nav__overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .nav__panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(380px, 88vw);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-lg);
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-xl) var(--space-xl);
    background: rgba(12, 18, 30, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateX(105%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1001;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .nav__panel.open {
    transform: translateX(0);
  }

  .nav__panel:not(.open) {
    visibility: hidden;
    pointer-events: none;
  }

  .nav__panel.open {
    visibility: visible;
    pointer-events: auto;
  }

  .nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav__item {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .nav__panel.open .nav__item {
    opacity: 1;
    transform: translateX(0);
  }

  .nav__panel.open .nav__item:nth-child(1) { transition-delay: 0.08s; }
  .nav__panel.open .nav__item:nth-child(2) { transition-delay: 0.12s; }
  .nav__panel.open .nav__item:nth-child(3) { transition-delay: 0.16s; }
  .nav__panel.open .nav__item:nth-child(4) { transition-delay: 0.2s; }
  .nav__panel.open .nav__item:nth-child(5) { transition-delay: 0.24s; }
  .nav__panel.open .nav__item:nth-child(6) { transition-delay: 0.28s; }
  .nav__panel.open .nav__item:nth-child(7) { transition-delay: 0.32s; }
  .nav__panel.open .nav__item:nth-child(8) { transition-delay: 0.36s; }

  .nav__link {
    display: block;
    font-size: 1.0625rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: normal;
  }

  .nav__link::after {
    display: none;
  }

  .nav__cta {
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-sm);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease 0.42s, transform 0.4s ease 0.42s;
  }

  .nav__panel.open .nav__cta {
    opacity: 1;
    transform: translateY(0);
  }

  .nav__toggle {
    display: flex;
  }
}

/* --- Large Tablets & Small Desktops --- */
@media (max-width: 1200px) {
  .nav__link {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .nav__menu {
    gap: 0.875rem;
  }

  .nav__cta {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 1200px) {
  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1100px) {
  .location-advantages__attractions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .floor-plans__grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin: 0 auto;
  }

  .floor-plan-modal__layout {
    grid-template-columns: 1fr;
  }

  .floor-plan-modal__figure {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .floor-plan-modal__img {
    min-height: 220px;
  }

  .amenities__explorer {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  }

  .living-cards {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin: 0 auto;
  }

  .pricing-table th,
  .pricing-table td {
    padding: 1rem 1.5rem;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1099px) {
  .facilities {
    padding-bottom: var(--space-2xl);
    overflow: visible;
  }

  .facilities > .container > .section__header {
    margin-bottom: var(--space-md);
  }

  .facilities > .container > .section__header .section__title {
    font-size: clamp(1.65rem, 5vw, 2.25rem);
  }

  .facilities__explorer.is-flow-mode {
    grid-template-columns: minmax(0, 80px) minmax(0, 1fr);
    gap: var(--space-sm);
    height: auto;
    align-items: start;
    overflow: visible;
  }

  .facilities__aside {
    position: sticky;
    top: calc(var(--header-height) + 0.5rem);
    z-index: 20;
    margin: 0;
    padding: var(--space-xs) 0.35rem;
    max-height: calc(100vh - var(--header-height) - 1rem);
    overflow: visible;
    align-self: start;
    height: auto;
    width: auto;
    border-radius: var(--radius-md);
  }

  .facilities__icon-list {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.3rem;
    overflow: visible;
  }

  .facilities__nav {
    overflow: visible;
  }

  .facilities__icon-btn {
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0.4rem 0.2rem;
    text-align: center;
    gap: 0.3rem;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .facilities__icon-btn.is-active {
    box-shadow: inset 3px 0 0 var(--color-brand-orange);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(var(--rgb-brand-orange), 0.4);
  }

  .facilities__icon-btn-circle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
  }

  .facilities__icon-label {
    font-size: 0.5625rem;
    line-height: 1.15;
    letter-spacing: 0.02em;
  }

  .facilities__panels-viewport {
    overflow: visible;
    height: auto;
    min-width: 0;
    scroll-snap-type: none;
  }

  .facilities__panel .healthcare__sticky-wrap,
  .facilities__panel .lifestyle-row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .facilities__panel .healthcare__visual {
    position: relative;
    top: auto;
    align-self: auto;
    display: block;
  }

  .facilities__panel .healthcare__video-panel {
    min-height: clamp(280px, 55vw, 420px);
    height: auto;
  }

  .facilities__panel .healthcare__video {
    min-height: clamp(280px, 55vw, 420px);
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .facilities__panel .amenities__icon-list {
    justify-content: center;
    gap: 0.3rem;
  }

  .facilities__panel .amenities__icon-btn {
    min-width: 58px;
  }

  .amenities-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .amenities-gallery__caption {
    font-size: 0.875rem;
    padding: 0.625rem 0.75rem;
  }
}

/* --- Tablets --- */
@media (max-width: 992px) {
  :root {
    --space-3xl: 5rem;
    --header-height: 72px;
  }

  .about__grid,
  .healthcare__sticky-wrap,
  .contact__layout,
  .lifestyle-row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .healthcare__visual {
    position: relative;
    top: auto;
    order: -1;
    max-width: 100%;
    margin: 0;
  }

  .healthcare__header {
    margin-bottom: var(--space-lg);
  }

  .healthcare__video-panel,
  .healthcare__video {
    min-height: clamp(380px, 62vw, 520px);
  }

  .lifestyle-row--reverse .lifestyle-row__media,
  .lifestyle-row--reverse .lifestyle-row__content {
    order: unset;
  }

  .lifestyle-row__text {
    max-width: none;
  }

  .lifestyle-row--reverse .lifestyle-row__text {
    margin-left: 0;
  }

  .about__visual {
    order: -1;
    max-width: 100%;
    margin: 0;
  }

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

  .about__highlight:last-child {
    grid-column: auto;
  }

  .about__badge {
    right: 0;
    bottom: -1rem;
  }

  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-masonry {
    column-count: 2;
  }

  .location-advantages__grid {
    grid-template-columns: 1fr;
  }

  .location-advantages__map {
    min-height: 320px;
    order: -1;
  }

  .location-advantages__map iframe {
    min-height: 320px;
  }

  .location-advantages__cards {
    grid-template-columns: 1fr;
  }

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

  .location-advantages__visit {
    flex-direction: column;
  }

  .location-advantages__visit .btn {
    width: 100%;
    text-align: center;
  }

  .amenities__explorer {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .amenities__nav {
    position: relative;
    top: auto;
    padding-right: 0;
  }

  .amenities__nav-track {
    display: none;
  }

  .amenities__icon-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .amenities__icon-list::-webkit-scrollbar {
    display: none;
  }

  .amenities__icon-btn {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    width: 88px;
    padding: 0.35rem;
    text-align: center;
  }

  .amenities__icon-label {
    font-size: 0.6875rem;
  }

  .amenities__panel {
    min-height: auto;
  }
}

/* --- Mobile Landscape & Large Phones --- */
@media (max-width: 768px) {
  :root {
    --space-3xl: 4rem;
    --space-2xl: 4rem;
    --space-xl: 2.5rem;
  }

  html,
  body {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
  }

  body {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: flex;
    align-items: stretch;
    background: linear-gradient(160deg, var(--color-brand-green-dark) 0%, var(--color-navy-deep) 100%);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-action-bar__item--enquire {
    font: inherit;
  }

  .mobile-action-bar__item--whatsapp {
    gap: 0.4rem;
  }

  .mobile-action-bar__label {
    font-size: 0.8125rem;
  }

  .mobile-action-bar__label--stack span {
    font-size: 0.75rem;
  }

  .container,
  .about .container {
    padding-left: clamp(0.875rem, 4vw, 1.25rem);
    padding-right: clamp(0.875rem, 4vw, 1.25rem);
  }

  .section {
    padding-left: 0;
    padding-right: 0;
  }

  .hero__title,
  .section__title,
  .lifestyle-row__title,
  .dist-card__name,
  .attraction-card__name,
  .faq-item__question {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .hero__inner {
    padding-left: clamp(0.875rem, 4vw, 1.25rem);
    padding-right: clamp(0.875rem, 4vw, 1.25rem);
  }

  .healthcare__video-trigger {
    left: 50%;
    right: auto;
    max-width: calc(100% - 2rem);
    white-space: normal;
    text-align: center;
  }

  .healthcare__video-trigger span {
    font-size: 0.8125rem;
  }

  .testimonials__slider {
    overflow: hidden;
  }

  .testimonial-card {
    max-width: 100%;
  }

  .location-advantages__attractions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .location-advantages__visit-item {
    flex: 1 1 100%;
  }

  .floor-plans__grid,
  .living-cards,
  .gallery-masonry {
    width: 100%;
    max-width: 100%;
  }

  .floor-plan-card,
  .living-card,
  .dist-card,
  .attraction-card {
    min-width: 0;
  }

  .footer__grid {
    width: 100%;
  }

  .section__header {
    margin-bottom: var(--space-lg);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-bottom: calc(var(--space-3xl) + 40px);
  }

  .hero__content {
    max-width: none;
    text-align: center;
  }

  .hero__pillars {
    justify-content: center;
  }

  .hero__actions {
    justify-content: center;
  }

  .floor-plans__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .living-cards {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin: 0 auto;
  }

  .pricing-table-wrap {
    overflow: visible;
  }

  .pricing-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .pricing-table th,
  .pricing-table td {
    padding: 0.75rem 0.4rem;
    font-size: 0.8125rem;
    text-align: center;
    word-break: break-word;
  }

  .pricing-table th {
    font-size: 0.625rem;
    letter-spacing: 0.03em;
    white-space: normal;
    line-height: 1.3;
  }

  .pricing-table th:nth-child(1) {
    width: 12%;
  }

  .pricing-table th:nth-child(2) {
    width: 22%;
  }

  .pricing-table th:nth-child(3) {
    width: 30%;
  }

  .pricing-table th:nth-child(4) {
    width: 36%;
  }

  .pricing-table td:last-child {
    width: auto;
  }

  .pricing-table .btn {
    min-width: 0;
    width: 100%;
    max-width: 6.25rem;
    padding: 0.5rem 0.4rem;
    font-size: 0.6875rem;
    line-height: 1.25;
    white-space: normal;
  }

  .facilities__icon-btn-circle {
    width: 42px;
    height: 42px;
  }

  .amenities__icon-btn-circle {
    width: 52px;
    height: 52px;
  }

  .amenities__panel {
    min-height: auto;
    padding: var(--space-lg);
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .stats__item {
    min-width: 0;
    padding: var(--space-md);
  }

  .gallery-masonry {
    column-count: 1;
    max-width: 480px;
    margin: 0 auto;
  }

  .gallery-filters {
    gap: 0.5rem;
  }

  .gallery-filter {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }

  .lightbox__nav {
    display: none;
  }

  .lightbox__inner {
    flex-direction: column;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__logo {
    justify-content: center;
  }

  .footer__tagline-text {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer__links a:hover {
    padding-left: 0;
  }

  .footer__contact-item {
    justify-content: center;
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .footer__back-top {
    justify-content: center;
  }

  .contact__form {
    padding: var(--space-lg);
  }

  .contact__layout {
    gap: var(--space-lg);
  }

  .testimonial-card {
    padding: var(--space-lg);
  }

  .testimonial-card__layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .testimonial-card__body {
    align-items: center;
  }

  .testimonial-card__stars {
    justify-content: center;
  }

  .testimonial-card__footer {
    align-items: center;
  }

  .testimonials__controls {
    gap: var(--space-sm);
  }

  .testimonials__arrow {
    width: 42px;
    height: 42px;
  }

  .faq-item__trigger {
    padding: 1rem 1.125rem;
    font-size: 0.9375rem;
  }

  .faq-item__panel-inner p {
    padding: 0 1.125rem 1.125rem;
    font-size: 0.875rem;
  }

  .faq-item__icon {
    width: 32px;
    height: 32px;
  }

  .about__badge {
    bottom: var(--space-sm);
    right: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .about__badge-number {
    font-size: 1.5rem;
  }

  .about__content {
    text-align: left;
  }

  .about__copy {
    text-align: left;
  }

  .about__copy p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .about__highlight {
    text-align: left;
  }

  .about__actions {
    justify-content: center;
  }

  .about__actions .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* --- Small Phones --- */
@media (max-width: 480px) {
  :root {
    --space-3xl: 3rem;
    --header-height: 64px;
  }

  .container {
    padding: 0 0.875rem;
  }

  .nav__brand {
    font-size: 1.125rem;
    letter-spacing: 0.1em;
  }

  .nav__logo img {
    width: 40px;
    height: 40px;
  }

  .nav__panel {
    width: min(340px, 92vw);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .facilities__explorer.is-flow-mode {
    grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
    gap: 0.5rem;
  }

  .facilities__aside {
    padding: 0.35rem 0.25rem;
  }

  .facilities__icon-btn {
    padding: 0.35rem 0.15rem;
  }

  .facilities__icon-btn-circle {
    width: 36px;
    height: 36px;
  }

  .facilities__icon-label {
    font-size: 0.5rem;
  }

  .pricing-table th,
  .pricing-table td {
    padding: 0.625rem 0.25rem;
    font-size: 0.75rem;
  }

  .pricing-table th {
    font-size: 0.5625rem;
  }

  .pricing-table .btn {
    max-width: 5.5rem;
    padding: 0.45rem 0.3rem;
    font-size: 0.625rem;
  }

  .amenities__icon-btn {
    width: 76px;
  }

  .amenities__icon-btn-circle {
    width: 48px;
    height: 48px;
  }

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

  .location-advantages__attractions-grid {
    grid-template-columns: 1fr;
  }

  .location-advantages__map iframe {
    min-height: 280px;
  }

  .hero__title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .section__title {
    font-size: clamp(1.625rem, 7vw, 2rem);
  }

  .thankyou__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .thankyou__actions .btn {
    width: 100%;
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 300px;
  }

  .hero__title-accent {
    display: inline;
  }

  .hero__pillars {
    gap: 0.5rem;
  }

  .hero__pillar {
    font-size: 0.8125rem;
    padding: 0.4rem 0.875rem;
    letter-spacing: 0.08em;
  }

  .stats__number {
    font-size: 2rem;
  }

  .stats__suffix {
    font-size: 1rem;
  }

  .stats__label {
    font-size: 0.8125rem;
  }

  .location-advantages__attractions-grid {
    grid-template-columns: 1fr;
  }

  .modal__content video {
    border-radius: var(--radius-md);
  }

  .modal__close {
    top: -36px;
    font-size: 1.75rem;
  }

  .back-to-top {
    width: 46px;
    height: 46px;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    right: var(--space-sm);
  }

  .particles-canvas {
    opacity: 0.3;
  }

  .motion-cursor {
    display: none !important;
  }

  .section-motion {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .header.header--hidden {
    transform: none;
  }

  .img-hover-zoom:hover img {
    transform: none;
  }

  .footer__social-link:hover {
    transform: none;
  }

  .footer__links a:hover {
    padding-left: 0;
  }
}

/* --- Touch device optimizations --- */
@media (hover: none) {
  .gallery-masonry__overlay {
    opacity: 1;
  }

  .gallery-masonry__caption {
    transform: translateY(0);
  }

  .gallery-masonry__item:hover img {
    transform: none;
  }
}

/* --- High resolution displays --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero__bg,
  .hero__video,
  .hero__fallback,
  .stats__parallax img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* --- Print styles --- */
@media print {
  .header,
  .preloader,
  .back-to-top,
  .mobile-action-bar,
  .hero__scroll,
  .modal,
  .nav__toggle {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  .hero__overlay {
    background: none;
  }

  .hero__title,
  .hero__eyebrow,
  .hero__pillar {
    color: #000;
  }

  .section {
    padding: 1.5rem 0;
    break-inside: avoid;
  }

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