/**
 * Ford Quang Tri - Responsive Breakpoints & Mobile Adaptation
 * Redesigned for Premium Ford Experience
 * Tested on: 375px, 390px, 768px, 1024px, 1440px, 1920px
 */

/* ==========================================================================
   Tablet & Smaller Desktop (< 1024px)
   ========================================================================== */
@media screen and (max-width: 1023px) {
  :root {
    --container-padding: 1.5rem;
    --header-height: 70px;
  }

  /* Hide desktop menu & show mobile hamburger */
  .fqt-nav {
    display: none;
  }

  .fqt-mobile-toggle {
    display: flex;
  }

  /* Mobile Drawer Navigation */
  .fqt-mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 340px;
    max-width: 88vw;
    height: 100vh;
    background-color: var(--color-deep-navy);
    color: var(--color-white);
    z-index: calc(var(--z-sticky-header) + 10);
    box-shadow: -10px 0 30px rgba(0, 10, 25, 0.5);
    overflow-y: auto;
    transition: right var(--transition-normal);
    padding: var(--space-8) var(--space-6);
  }

  .fqt-mobile-drawer.is-active {
    right: 0;
  }

  .fqt-drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 15, 35, 0.7);
    backdrop-filter: blur(4px);
    z-index: calc(var(--z-sticky-header) + 5);
  }

  .fqt-drawer-overlay.is-active {
    display: block;
  }

  .fqt-mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .fqt-drawer-close {
    font-size: 1.75rem;
    color: var(--color-white);
    padding: var(--space-1);
    line-height: 1;
  }

  .fqt-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .fqt-mobile-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.5rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .fqt-mobile-menu-link:hover,
  .fqt-mobile-menu-link.active {
    color: var(--color-accent-blue);
    padding-left: 0.75rem;
  }

  /* Mobile Accordion Drawer Enhancements */
  .fqt-mobile-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .fqt-mobile-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .fqt-mobile-acc-header .fqt-mobile-menu-link {
    border-bottom: none;
    flex-grow: 1;
    padding-right: 0.5rem;
  }

  .fqt-mobile-acc-toggle {
    background: transparent;
    border: none;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fqt-mobile-accordion.is-open .fqt-mobile-acc-toggle .fqt-chevron-svg {
    transform: rotate(180deg);
  }

  .fqt-mobile-accordion.is-open .fqt-mobile-acc-toggle .fqt-submenu-indicator {
    background: linear-gradient(135deg, #1877F2 0%, #0052CC 100%);
    border-color: #93C5FD;
    color: #FFFFFF;
    box-shadow: 0 0 12px rgba(24, 119, 242, 0.7);
  }

  .fqt-mobile-acc-content {
    display: none;
    padding: 0.25rem 0 0.75rem 0.85rem;
    border-left: 2px solid rgba(24, 119, 242, 0.5);
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    flex-direction: column;
    gap: 4px;
  }

  .fqt-mobile-accordion.is-open .fqt-mobile-acc-content {
    display: flex;
  }

  .fqt-mobile-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .fqt-mobile-sublink:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
  }

  .fqt-mobile-subprice {
    font-size: 0.76rem;
    color: #38BDF8;
    font-weight: 700;
  }

  .fqt-mobile-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    color: #38BDF8;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .fqt-mobile-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }

  /* Grids */
  .fqt-selector-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .fqt-tech-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .fqt-editorial-promo-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .fqt-pathways-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .fqt-test-drive-container {
    grid-template-columns: 1fr;
  }

  .fqt-magazine-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .fqt-dealership-card {
    grid-template-columns: 1fr;
  }

  .fqt-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .fqt-grid-3,
  .fqt-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   Mobile & Tablet Portrait (< 768px)
   ========================================================================== */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1.25rem;
    --header-height: 64px;
  }

  /* Responsive Grids Collapse on Mobile */
  .fqt-grid-1,
  .fqt-grid-2,
  .fqt-grid-3,
  .fqt-grid-4 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-6);
  }
  .fqt-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  .fqt-page-card {
    padding: var(--space-5) var(--space-4);
  }

  /* Universal 16px Font Size on Form Inputs to prevent iOS Safari auto-zoom */
  .fqt-input,
  .fqt-select,
  .fqt-textarea,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Body bottom padding so bottom CTA bar doesn't overlap content with Safe Area */
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* CTA Band Responsive (Tin tuc, Archive, Test drive) */
  .fqt-cta-band {
    padding: var(--space-8) 0;
    overflow: hidden;
  }
  .fqt-cta-band-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .fqt-cta-band-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
  }
  .fqt-cta-band-actions .fqt-btn {
    width: 100%;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }

  /* Hide desktop topbar on small screens to save vertical space */
  .fqt-topbar {
    display: none;
  }

  /* Show mobile fixed bottom bar */
  .fqt-mobile-bottom-bar {
    display: block;
  }

  /* Hide desktop floating contact button on mobile since mobile bottom bar is active */
  .fqt-floating-contact,
  .fqt-fab-contact {
    display: none !important;
  }

  /* Section Spacing on Mobile */
  .fqt-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .fqt-section-lg {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  /* Hero Section */
  .fqt-hero {
    height: 82vh;
    min-height: 520px;
  }

  .fqt-hero-content {
    padding-top: var(--header-height);
  }

  .fqt-hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .fqt-hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: var(--space-6);
  }

  .fqt-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .fqt-hero-actions .fqt-btn {
    width: 100%;
  }

  /* Interactive Selector on Mobile */
  .fqt-selector-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    -webkit-overflow-scrolling: touch;
  }

  .fqt-selector-item {
    flex: 0 0 auto;
    padding: 0.75rem 1.15rem;
    border-radius: var(--radius-full);
    width: auto;
  }

  .fqt-selector-item .fqt-selector-num,
  .fqt-selector-item .fqt-selector-item-right {
    display: none;
  }

  .fqt-selector-item .fqt-selector-name {
    font-size: 0.95rem;
  }

  .fqt-selector-spotlight {
    padding: var(--space-6);
  }

  .fqt-spotlight-visual {
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
  }

  .fqt-spotlight-img {
    height: 100%;
    max-height: none;
    width: 100%;
    object-fit: cover;
  }

  .fqt-magazine-compact {
    flex-direction: column;
  }

  .fqt-magazine-compact-thumb {
    width: 100%;
    height: 180px;
  }

  .fqt-spotlight-header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .fqt-spotlight-price-box {
    text-align: left;
  }

  .fqt-spotlight-specs {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .fqt-spotlight-actions {
    flex-direction: column;
  }

  .fqt-spotlight-actions .fqt-btn {
    width: 100%;
  }

  /* Brand Experience */
  .fqt-brand-experience {
    padding: var(--space-16) 0;
  }

  .fqt-brand-title {
    font-size: 2.25rem;
  }

  /* Promo Metrics */
  .fqt-promo-metric-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .fqt-promo-featured {
    padding: var(--space-6);
  }

  /* Test Drive */
  .fqt-td-visual-pane {
    padding: var(--space-6);
    min-height: 280px;
  }

  .fqt-td-form-pane {
    padding: var(--space-6);
  }

  /* Dealership Card */
  .fqt-dealership-info {
    padding: var(--space-6);
  }

  .fqt-dealership-map {
    min-height: 320px;
  }

  .fqt-dealership-map iframe {
    min-height: 320px;
  }

  /* Footer */
  .fqt-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .fqt-footer-main {
    padding-top: var(--space-12);
    padding-bottom: var(--space-8);
  }

  .fqt-back-to-top {
    bottom: 74px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   Small Mobile Devices (375px - 390px iPhone & Android)
   ========================================================================== */
@media screen and (max-width: 420px) {
  :root {
    --container-padding: 1rem;
  }

  .fqt-hero-title {
    font-size: 1.85rem;
  }

  .fqt-section-title {
    font-size: 1.65rem;
  }

  .fqt-spotlight-visual {
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
  }

  .fqt-spotlight-img {
    height: 100%;
    max-height: none;
    width: 100%;
    object-fit: cover;
  }

  .fqt-spotlight-title {
    font-size: 1.45rem;
  }

  .fqt-spotlight-price {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Extra Large Displays (>= 1440px, 1920px)
   ========================================================================== */
@media screen and (min-width: 1440px) {
  :root {
    --container-max-width: 1440px;
  }

  .fqt-hero {
    height: 90vh;
  }
}

@media screen and (min-width: 1920px) {
  :root {
    --container-max-width: 1520px;
  }

  .fqt-hero {
    height: 92vh;
    max-height: 1040px;
  }
}