/* ============================================
   LIQUID GLASS & AI CINEMA - Responsive
   Mobile-First Breakpoints
   ============================================ */

/* ========================================
   MOBILE ONLY (up to 767px)
   Phones
   ======================================== */
@media (max-width: 767px) {
  /* Reduce section spacing on mobile */
  .section {
    padding-block: var(--space-10);
  }

  .section--sm {
    padding-block: var(--space-6);
  }

  .section--lg {
    padding-block: var(--space-12);
  }

  .section--xl {
    padding-block: var(--space-16);
  }

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

  .hero {
    padding: var(--space-10) 0;
  }

  .hero__stats {
    margin-top: var(--space-8);
    gap: var(--space-6);
  }

  .footer {
    padding: var(--space-10) 0 var(--space-6);
  }

  .footer__grid {
    gap: var(--space-8);
    margin-bottom: var(--space-8);
  }

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

  /* Hide logout button in header - it's in burger menu */
  .header .btn--glass.btn--sm {
    display: none;
  }

  /* Hero content centered on mobile */
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero__badge {
    justify-content: center;
  }

  .hero__actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Footer centered on mobile */
  .footer__grid {
    text-align: center;
  }

  .footer__col {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__logo {
    justify-content: center;
  }

  .footer__about {
    text-align: center;
    margin-inline: auto;
  }

  .footer__title {
    text-align: center;
  }

  .footer__list {
    text-align: center;
    padding: 0;
    list-style: none;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__contact-item {
    justify-content: center;
    text-align: center;
  }

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

  .footer__copyright {
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }

  /* Contact form cells: stack label on top on mobile */
  .form-cell {
    flex-direction: column;
    align-items: stretch;
  }

  .form-cell__label {
    width: auto;
    padding: var(--space-3) var(--space-4) 0;
    font-size: 0.75rem;
  }

  .form-cell__label--top {
    padding-top: var(--space-3);
  }

  .form-cell__input {
    padding: var(--space-2) var(--space-4) var(--space-3);
  }
}

/* ========================================
   SMALL SCREENS (640px+)
   Large phones, small tablets
   ======================================== */
@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-6);
  }

  /* Grid */
  .sm\:grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact Form */
  .form-cell__label {
    width: 110px;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer__copyright {
    text-align: left;
  }

  .footer__legal {
    justify-content: flex-end;
  }
}

/* ========================================
   TABLETS PORTRAIT (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Hero centered on screen */
  .hero .container {
    display: flex;
    justify-content: center;
  }

  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Hero content centered */
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 600px;
  }

  .hero__badge {
    justify-content: center;
  }

  /* Hero actions grid: 2-2-1-1 layout */
  .hero__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    width: 100%;
  }

  .hero__actions .btn:nth-child(5),
  .hero__actions .btn:nth-child(6) {
    grid-column: span 2;
  }

  /* Footer centered on tablets */
  .footer__grid {
    text-align: center;
  }

  .footer__col {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__logo {
    justify-content: center;
  }

  .footer__about {
    text-align: center;
  }

  .footer__title {
    text-align: center;
  }

  .footer__list {
    text-align: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__contact-item {
    justify-content: center;
    text-align: center;
  }

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

  .footer__copyright {
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }
}

/* ========================================
   MEDIUM SCREENS (768px+)
   Tablets
   ======================================== */
@media (min-width: 768px) {
  :root {
    --header-height: 80px;
  }

  .container {
    padding-inline: var(--space-8);
  }

  /* Header */
  .header {
    height: var(--header-height);
    padding: 0 var(--space-8);
  }

  .header__logo-text {
    display: block;
  }

  .header__nav {
    display: block;
  }

  .header__cta {
    display: inline-flex;
  }

  .header__menu-btn {
    display: none;
  }

  .mobile-nav {
    display: none;
  }

  /* Main content */
  .main {
    padding-top: var(--header-height);
  }

  /* Grid */
  .md\:grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Contact Page */
  .contact-grid {
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-16);
    align-items: start;
  }

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

  .footer__col:nth-child(2) {
    text-align: center;
  }

  .footer__col:nth-child(3) {
    text-align: right;
  }

  .footer__col:nth-child(3) .footer__contact-item {
    justify-content: flex-end;
  }

  .footer__about {
    max-width: none;
  }

  /* Hero */
  .hero__actions {
    flex-wrap: nowrap;
  }

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

  .hero__visuals {
    display: block;
  }

  .hero__image {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero__image-img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }

  .hero__content {
    max-width: none;
  }

  /* 404 Page */
  .error-page__actions {
    flex-wrap: nowrap;
  }

  /* Utility: Hide on tablet+ */
  .md\:hidden {
    display: none;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }
}

/* ========================================
   LARGE SCREENS (1024px+)
   Laptops, small desktops
   ======================================== */
@media (min-width: 1024px) {
  .container {
    padding-inline: var(--space-10);
  }

  /* Sections */
  .section {
    padding-block: var(--space-20);
  }

  .section--lg {
    padding-block: var(--space-32);
  }

  /* Grid */
  .lg\:grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg\:grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Hero */
  .hero {
    min-height: calc(100vh - var(--header-height));
  }

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

  .hero__content {
    max-width: none;
  }

  .hero__image {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero__image-wrapper {
    max-width: none;
    width: 100%;
  }

  .hero__image-img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }

  /* Contact */
  .contact-section {
    padding: var(--space-24) 0;
  }

  /* Utility */
  .lg\:hidden {
    display: none;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }
}

/* ========================================
   EXTRA LARGE SCREENS (1280px+)
   Desktops
   ======================================== */
@media (min-width: 1280px) {
  .container {
    padding-inline: var(--space-12);
  }

  /* Header */
  .header__nav-list {
    gap: var(--space-2);
  }

  .header__nav-link {
    padding: var(--space-3) var(--space-5);
  }

  /* Grid */
  .xl\:grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xl\:grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Hero */
  .hero__stats {
    gap: var(--space-16);
  }

  /* Utility */
  .xl\:hidden {
    display: none;
  }

  .xl\:block {
    display: block;
  }
}

/* ========================================
   2XL SCREENS (1536px+)
   Large desktops
   ======================================== */
@media (min-width: 1536px) {
  .container {
    padding-inline: var(--space-16);
  }

  /* Utility */
  .xxl\:hidden {
    display: none;
  }

  .xxl\:block {
    display: block;
  }
}

/* ========================================
   HEIGHT-BASED QUERIES
   ======================================== */
@media (max-height: 700px) {
  .hero {
    min-height: auto;
    padding: var(--space-12) 0;
  }

  .error-page {
    min-height: auto;
    padding: var(--space-20) var(--space-4);
  }

  .error-page__code {
    font-size: clamp(6rem, 20vw, 12rem);
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .page-bg__rays {
    animation: none;
  }

  .page-bg__orb {
    animation: none;
  }

  .particle {
    animation: none;
    display: none;
  }

  .error-page__code {
    animation: none;
  }

  .error-page__code:hover {
    animation: none;
  }

  .hero__badge-dot {
    animation: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .animate-float,
  .animate-pulse,
  .animate-glow {
    animation: none;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */
@media (prefers-contrast: high) {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.2);
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.7);
  }

  .glass-card {
    border-width: 2px;
  }

  .btn--glass {
    border-width: 2px;
  }

  .form-input {
    border-width: 2px;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  .page {
    background: white;
  }

  .page-bg,
  .header,
  .footer,
  .mobile-nav,
  .particles {
    display: none !important;
  }

  .main {
    padding-top: 0;
  }

  .glass-card {
    background: transparent;
    backdrop-filter: none;
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .glass-card::before,
  .glass-card::after {
    display: none;
  }

  .btn--primary,
  .btn--glow {
    background: #333;
    color: white;
    border: 1px solid #333;
  }

  .gradient-text {
    background: none;
    -webkit-text-fill-color: #333;
    color: #333;
  }

  body,
  .text-primary {
    color: black;
  }

  .text-secondary,
  .text-muted {
    color: #333;
  }

  a {
    text-decoration: underline;
  }

  /* Show URLs */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }
}

/* ========================================
   TOUCH DEVICES
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects that might stick on touch */
  .glass-card:hover {
    transform: none;
  }

  .glass-card:hover::after {
    opacity: 0;
  }

  .btn:hover {
    transform: none;
  }

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

  /* Add active states instead */
  .glass-card:active {
    transform: scale(0.98);
  }

  .btn:active {
    transform: scale(0.96);
  }
}

/* ========================================
   LANDSCAPE ORIENTATION (Mobile)
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--space-8) 0;
  }

  .error-page {
    min-height: auto;
    padding: var(--space-8);
  }

  .error-page__code {
    font-size: clamp(4rem, 15vw, 8rem);
  }

  .mobile-nav {
    padding: var(--space-4);
  }

  .mobile-nav__link {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-lg);
  }
}

/* ========================================
   SAFE AREA (Notched devices)
   ======================================== */
@supports (padding: env(safe-area-inset-top)) {
  .header {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }

  .mobile-nav {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
  }

  .footer {
    padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
  }
}