/* ==========================================================================
   JAAS CREATIONS - Responsive & Mobile Stylesheet
   ========================================================================== */

/* Between 992px (where the nav collapses to the drawer) and 1440px the
   logo, menu and CTA get tighter spacing so they stay on one line. */
@media (max-width: 1440px) {
  .nav-links {
    gap: 16px;
  }

  .nav-actions {
    gap: 10px;
  }
}

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

  /* The span-N classes are for the 12-column desktop grid; left on, they
     add implicit columns here and squeeze every card. */
  .capability-card[class*="span-"] {
    grid-column: auto;
  }

  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 992px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: min(300px, 86vw);
    height: 100vh;
    background: #0e071c;
    border-left: 1px solid var(--border-brand);
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 24px 40px;
    gap: 16px;
    /* Parked off-screen with right:-100% the closed drawer still widened the
       page, so phones zoomed the whole site out. It now stays in place and
       is wiped in with clip-path, which takes no extra width. */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.9), 0 0 30px rgba(124, 58, 237, 0.2);
    z-index: 1001;
    overflow-y: auto;
  }

  .nav-links.active {
    /* Negative left inset leaves room for the drawer's edge shadow. */
    clip-path: inset(0 0 0 -60px);
    visibility: visible;
    transition: clip-path 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }

  /* The megamenus open on hover, which touch screens don't have. Inside the
     drawer they sit open under their parent instead, so every item is reachable. */
  .nav-links .has-dropdown {
    width: 100%;
  }

  .nav-links .dropdown-megamenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: inherit; /* follows the drawer: hidden (and unfocusable) while it is closed */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 12px 0 4px;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-left: 1px solid var(--border-brand);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-links .has-dropdown:hover .dropdown-megamenu {
    transform: none;
  }

  .nav-links .dropdown-col {
    gap: 10px;
  }

  .nav-links .dropdown-col a {
    font-size: var(--text-sm);
  }

  .nav-links .dropdown-category-title {
    font-family: var(--font-mono-tag);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--brand-purple-lift);
  }

  .nav-link {
    font-size: var(--text-md);
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .mobile-menu-toggle {
    display: block;
    z-index: 1002;
  }

  .nav-links .nav-item-contact {
    display: list-item;
  }

  .vertical-card-inner,
  .vertical-card.reversed .vertical-card-inner {
    grid-template-columns: 1fr;
  }

  .vertical-card.reversed .vertical-info-side {
    order: 1;
  }

  .vertical-card.reversed .vertical-media-side {
    order: 2;
  }

  .vertical-info-side {
    padding: 36px 28px;
  }

  .vertical-media-side {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    min-height: 360px;
  }

  .vertical-card.reversed .vertical-media-side {
    border-right: none;
    border-top: 1px solid var(--border-subtle);
  }

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

  .workflow-timeline::before {
    display: none;
  }

  .quote-layout-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --site-chrome: 100px;
  }

  .section-padding {
    padding: var(--space-8) 0;
  }

  .section-padding.rhythm-tight {
    padding: var(--space-7) 0;
  }

  .section-padding.rhythm-generous {
    padding: calc(var(--space-8) + var(--space-6)) 0;
  }

  #verticals.section-padding {
    padding-top: var(--space-7);
  }

  .hero {
    padding: 96px 0 92px;
  }

  .hero-title {
    font-size: var(--text-5xl);
  }

  .hero-stats-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .vertical-deliverables {
    grid-template-columns: 1fr;
  }

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

  .workflow-timeline {
    grid-template-columns: 1fr;
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .quote-form-card {
    padding: 28px 20px;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .deep-features-grid {
    grid-template-columns: 1fr;
  }

  #layout .grid-layout,
  #layout [data-grid],
  #layout.grid-layout,
  #layout[data-grid] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  #layout [data-grid] .item,
  #layout[data-grid] .item {
    grid-column: auto !important;
    grid-row: auto !important;
  }

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

  .estimator-container {
    padding: 28px 20px;
  }

  .subpage-cta-banner {
    padding: 36px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .calc-options-grid {
    grid-template-columns: 1fr;
  }

  .brand-title {
    font-size: var(--text-md);
  }
  
  .brand-subtitle {
    font-size: var(--text-3xs);
  }

  /* No room for the header CTA next to the wordmark on a phone; the floating
     WhatsApp and call buttons and the menu's Contact link cover it. */
  .nav-actions .btn-primary {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions a, .hero-actions button {
    width: 100%;
    text-align: center;
  }

  /* The nav buttons wrap to a second row here, so the header is taller and
     the film has to bleed further up behind it. */
  :root {
    --site-chrome: 124px;
  }

  .hero {
    padding: 84px 0 88px;
  }
}


/* Sideways slide-ins push cards past the screen edge on phones; there they
   rise into place instead. */
@media (max-width: 768px) {
  .animate-slide-left,
  .animate-slide-right {
    transform: translateY(24px);
  }
}

/* Grid and flex children default to min-width:auto, so a long uppercase
   heading or an email address pushed whole panels past a phone screen. */
@media (max-width: 768px) {
  .vertical-card-inner > *,
  .subpage-cta-text,
  .contact-card-panel,
  .contact-channel-details,
  .container > *,
  .about-hero-grid > *,
  .about-facility-highlight-card > *,
  .form-grid > *,
  [style*="grid-template-columns"] > * {
    min-width: 0;
  }

  h1, h2, h3,
  .section-title-huge,
  .vertical-heading,
  .contact-channel-details a {
    overflow-wrap: break-word;
  }

  .spec-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Four columns can't share 330px; the table keeps a readable width and
     the wrapper scrolls sideways. */
  .spec-table {
    min-width: 640px;
  }

  .table-hint {
    display: block;
    margin: 24px 0 -18px;
    font-family: var(--font-mono-tag);
    font-size: var(--text-2xs);
    color: var(--text-dim);
  }

  .spec-table th,
  .spec-table td {
    padding: 14px 16px;
  }

  .subpage-cta-text h3 {
    font-size: var(--text-2xl);
  }

  .contact-card-panel {
    padding: 28px 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vertical-cta-row {
    flex-wrap: wrap;
  }
}

/* The display face is very wide; at desktop sizes single words like
   CREATIONS or CONVENTION are wider than a phone, so headings step down
   here instead of breaking mid-word. Inline sizes on some headings need
   the !important. */
@media (max-width: 480px) {
  .page-title-massive {
    font-size: clamp(1.35rem, 6.4vw, 2.2rem);
  }

  /* Event titles are often one long word (ENTERTAINMENTS, INAUGURATIONS). */
  .ev-hero .page-title-massive {
    font-size: clamp(1.1rem, 5.4vw, 2.2rem);
  }

  .section-title-huge {
    font-size: clamp(1.25rem, 6vw, 1.8rem) !important;
  }

  .vertical-heading {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
  }

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

  /* Words longer than about twelve letters still don't fit; a real hyphen
     reads better than a bare mid-word break. */
  h1, h2, h3,
  .page-title-massive,
  .section-title-huge,
  .vertical-heading,
  .capability-title {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Small phones (iPhone SE and similar): one more step down so single long
   words in the wide display face still fit. */
@media (max-width: 360px) {
  .page-title-massive {
    font-size: 1.2rem;
  }

  .ev-hero .page-title-massive {
    font-size: 1.05rem;
  }

  .section-title-huge {
    font-size: 1.15rem !important;
  }

  .vertical-heading {
    font-size: 1rem;
  }
}

/* Footer and breadcrumb links are 18-20px tall; on touch screens they get a
   taller hit area without changing how they look. */
@media (max-width: 768px) {
  .footer-links-list a,
  .footer-contact-item a,
  .breadcrumb-nav a {
    display: inline-block;
    padding-block: 7px;
    margin-block: -7px;
  }

  .footer-links-list {
    gap: 18px;
  }
}