/* mobile.css — PT THE ENTERTAINMENT MEDIA — Full Responsive System */

/* ============================================================
   TABLET: 768px – 1023px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

  section[id] { padding-top: 100px !important; padding-bottom: 100px !important; }

  /* Hero */
  #hero .t-display-hero { font-size: clamp(44px, 7vw, 68px) !important; }
  #hero .t-display-xl   { font-size: clamp(32px, 5vw, 52px) !important; padding-left: 0 !important; }
  #hero .pb-\[15vh\]    { padding-bottom: 60px !important; }
  #hero .grid.grid-cols-1.md\:grid-cols-12 { gap: 20px !important; margin-top: 32px !important; }

  /* About */
  #about .lg\:pr-24     { padding-right: 40px !important; }
  #about .t-headline-lg { font-size: clamp(24px, 3.5vw, 36px) !important; }

  /* Activities */
  #activities .t-display-xl              { font-size: clamp(36px, 5.5vw, 56px) !important; }
  #activities article .font-serif        { font-size: 48px !important; }
  #activities .t-headline-lg             { font-size: clamp(20px, 3vw, 30px) !important; }

  /* Services */
  #services .t-display-xl               { font-size: clamp(36px, 5.5vw, 56px) !important; }
  #services .t-headline-lg              { font-size: clamp(20px, 2.5vw, 28px) !important; }
  #services .md\:w-1\/3                 { width: 45% !important; }

  /* Corporate */
  #corporate .t-display-xl              { font-size: clamp(34px, 5vw, 56px) !important; }
  #corporate .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

  /* Footer */
  footer h2.font-serif                  { font-size: clamp(36px, 7vw, 72px) !important; }
}

/* ============================================================
   MOBILE: max-width 767px
   ============================================================ */
@media (max-width: 767px) {

  /* --- GLOBAL --- */
  section[id] { padding-top: 72px !important; padding-bottom: 72px !important; }
  .max-w-\[1600px\] { padding-left: 20px !important; padding-right: 20px !important; }
  .mb-24 { margin-bottom: 40px !important; }
  .mb-32 { margin-bottom: 48px !important; }
  .lg\:mb-32 { margin-bottom: 48px !important; }
  .mt-16 { margin-top: 24px !important; }
  .mt-20 { margin-top: 32px !important; }
  .gap-12 { gap: 24px !important; }
  .gap-16 { gap: 28px !important; }

  /* --- NAV --- */
  #main-nav .flex.justify-between.items-center { height: 68px !important; padding-left: 20px !important; padding-right: 20px !important; }
  #main-nav .font-serif.text-2xl              { font-size: 13px !important; letter-spacing: 0.08em !important; }
  #main-nav .t-label-caps.text-gold\/80       { font-size: 8px !important; letter-spacing: 0.18em !important; }
  .mobile-nav-link                            { padding: 20px 24px !important; font-size: 11px !important; letter-spacing: 0.18em !important; }
  .mobile-drawer .p-8                         { padding: 18px 24px !important; }
  .mobile-drawer .btn-primary                 { padding: 16px 20px !important; font-size: 10px !important; letter-spacing: 0.18em !important; width: 100% !important; justify-content: center !important; }

  /* --- HERO --- */
  #hero { min-height: 100dvh; height: 100dvh; }
  #hero .t-display-hero                 { font-size: clamp(30px, 8.5vw, 48px) !important; line-height: 1.0 !important; }
  #hero .t-display-xl                   { font-size: clamp(22px, 6.5vw, 38px) !important; line-height: 1.05 !important; padding-left: 0 !important; margin-top: -2px !important; }
  #hero .flex.items-center.gap-6.mb-8   { margin-bottom: 16px !important; }
  #hero .grid.grid-cols-1.md\:grid-cols-12 { display: flex !important; flex-direction: column !important; gap: 28px !important; margin-top: 32px !important; }
  #hero .md\:col-span-5.md\:col-start-2 { width: 100% !important; }
  #hero .md\:col-span-5.md\:col-start-8 { width: 100% !important; }
  #hero .flex.flex-col.sm\:flex-row      { flex-direction: column !important; gap: 12px !important; }
  #hero .btn-primary, #hero .btn-primary-light { width: 100% !important; padding: 17px 20px !important; font-size: 10px !important; justify-content: center !important; }
  #hero .t-body-lg                       { font-size: 14px !important; line-height: 1.7 !important; }
  #hero .pb-\[15vh\]                     { padding-bottom: 44px !important; }
  #hero .ml-2.md\:ml-12                  { margin-left: 0 !important; }
  #hero .absolute.bottom-12.right-12     { display: none !important; }
  #hero .border-l-2                      { padding-left: 16px !important; }

  /* --- ABOUT --- */
  #about .lg\:pr-24  { padding-right: 0 !important; }
  #about .pt-12      { padding-top: 0 !important; }
  #about .t-headline-lg { font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.3 !important; margin-bottom: 28px !important; }
  #about .flex.flex-col.md\:flex-row.gap-12 { gap: 16px !important; padding-left: 12px !important; }
  #about .t-body-lg, #about .t-body-sm  { font-size: 14px !important; line-height: 1.75 !important; }
  #about .lg\:w-5\/12 { width: 100% !important; margin-top: 36px !important; }
  #about .aspect-\[3\/4\] { aspect-ratio: 4 / 3 !important; }
  #about .absolute.-left-12 { display: none !important; }
  #about .absolute.-inset-4 { display: none !important; }

  /* --- ACTIVITIES / KBLI --- */
  #activities .t-display-xl { font-size: clamp(28px, 7.5vw, 44px) !important; line-height: 1.1 !important; }
  #activities article        { padding-top: 36px !important; padding-bottom: 36px !important; }
  #activities .lg\:w-3\/12  { width: 100% !important; flex-direction: row !important; align-items: baseline !important; gap: 10px !important; margin-bottom: 14px !important; }
  #activities .lg\:w-9\/12, #activities .lg\:w-7\/12 { width: 100% !important; }
  #activities article .font-serif { font-size: 32px !important; line-height: 1 !important; }
  #activities .t-headline-lg { font-size: clamp(17px, 4.5vw, 24px) !important; line-height: 1.3 !important; margin-bottom: 10px !important; transform: none !important; transition: none !important; }
  #activities .t-body-lg { font-size: 13px !important; line-height: 1.7 !important; transform: none !important; transition: none !important; }
  /* Disable KBLI background image pan on mobile for perf */
  #activities article img { transition: none !important; }

  /* --- SERVICES --- */
  #services .t-display-xl { font-size: clamp(28px, 7.5vw, 44px) !important; }
  #services .flex.flex-col.md\:flex-row.md\:items-end { flex-direction: column !important; gap: 16px !important; }
  #services .t-body-lg  { font-size: 14px !important; line-height: 1.75 !important; }
  #services .t-headline-lg { font-size: clamp(16px, 4.5vw, 22px) !important; line-height: 1.25 !important; transform: none !important; transition: color 0.3s !important; }
  #services .t-body-sm  { font-size: 13px !important; line-height: 1.7 !important; width: 100% !important; transform: none !important; transition: none !important; }
  #services .t-mono-data.text-gold { font-size: 9px !important; }
  #services .hidden.md\:block { display: none !important; }

  /* --- DISTRIBUTION --- */
  #distribution { padding: 72px 20px !important; }
  #distribution .structural-grid { display: flex !important; flex-direction: column !important; gap: 28px !important; }
  #distribution .col-span-1.md\:col-span-3 { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid var(--color-outline-variant) !important; padding-bottom: 20px !important; }
  #distribution h2 { font-size: clamp(20px, 5.5vw, 28px) !important; margin-top: 6px !important; }
  #distribution p, #distribution .font-body-lg { font-size: 14px !important; line-height: 1.75 !important; }
  #distribution .grid.grid-cols-1.md\:grid-cols-2 { gap: 20px !important; }
  #distribution .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  #distribution .grid.grid-cols-2.md\:grid-cols-4 > div:nth-child(2) { border-right: none !important; }
  #distribution .grid.grid-cols-2.md\:grid-cols-4 > div:nth-child(1),
  #distribution .grid.grid-cols-2.md\:grid-cols-4 > div:nth-child(2) { border-bottom: 1px solid var(--color-outline-variant) !important; }
  #distribution .hidden.md\:block { display: none !important; }

  /* --- CORPORATE STATS --- */
  #corporate .t-display-xl.text-on-surface { font-size: clamp(26px, 7vw, 40px) !important; }
  #corporate .t-body-lg { font-size: 14px !important; line-height: 1.75 !important; }
  #corporate .mb-24 { margin-bottom: 36px !important; }
  #corporate .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; }
  #corporate .flex.flex-col.items-center.text-center.group { padding: 28px 12px !important; border-right: 1px solid var(--color-outline-variant); border-bottom: 1px solid var(--color-outline-variant); }
  #corporate .flex.flex-col.items-center.text-center.group:nth-child(2),
  #corporate .flex.flex-col.items-center.text-center.group:nth-child(4) { border-right: none !important; }
  #corporate .flex.flex-col.items-center.text-center.group:nth-child(3),
  #corporate .flex.flex-col.items-center.text-center.group:nth-child(4) { border-bottom: none !important; }
  #corporate .t-display-xl.text-gold { font-size: clamp(26px, 7.5vw, 40px) !important; margin-bottom: 6px !important; transition: none !important; }
  #corporate .group:hover .t-display-xl { transform: none !important; }
  #corporate .t-label-caps { font-size: 8px !important; letter-spacing: 0.12em !important; line-height: 1.4 !important; }

  /* --- CONTACT / ENQUIRY --- */
  #contact { padding-top: 72px !important; padding-bottom: 72px !important; }
  #contact .flex.flex-col.lg\:flex-row { gap: 40px !important; }
  #contact .lg\:w-5\/12, #contact .lg\:w-7\/12 { width: 100% !important; }
  #contact .t-display-xl { font-size: clamp(26px, 7vw, 40px) !important; line-height: 1.1 !important; margin-bottom: 16px !important; }
  #contact .t-body-lg { font-size: 14px !important; line-height: 1.75 !important; margin-bottom: 28px !important; }
  #contact .hidden.lg\:flex { display: none !important; }
  #contact .form-field, #contact input, #contact textarea, #contact select { padding: 14px !important; font-size: 16px !important; min-height: 50px !important; }
  #contact textarea { min-height: 110px !important; }
  #contact .grid.grid-cols-1.md\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 14px !important; }
  #contact .gap-12 { gap: 14px !important; }
  #contact .btn-primary, #contact #submit-btn { width: 100% !important; padding: 18px 20px !important; font-size: 11px !important; justify-content: center !important; min-height: 54px !important; }

  /* --- FOOTER --- */
  footer { padding-top: 56px !important; padding-bottom: 36px !important; }
  footer h2.font-serif { font-size: clamp(24px, 8.5vw, 44px) !important; margin-bottom: 10px !important; word-break: break-word !important; }
  footer .border-b.border-outline-variant\/50.pb-24.mb-24 { padding-bottom: 28px !important; margin-bottom: 36px !important; }
  footer .grid.grid-cols-1.md\:grid-cols-3 { grid-template-columns: 1fr !important; gap: 40px !important; margin-bottom: 40px !important; }
  footer .flex.flex-col.items-center,
  footer .flex.flex-col.md\:items-start,
  footer .flex.flex-col.md\:items-end { align-items: center !important; text-align: center !important; }
  footer .t-label-caps { font-size: 9px !important; letter-spacing: 0.18em !important; margin-bottom: 16px !important; }
  footer .t-body-lg { font-size: 15px !important; line-height: 1.5 !important; }
  footer .flex.flex-col.gap-6 { gap: 18px !important; }
  footer form.flex.w-full { max-width: 100% !important; }
  footer .flex.flex-col.md\:flex-row.items-center { flex-direction: column !important; gap: 14px !important; align-items: center !important; text-align: center !important; }

  /* --- SECONDARY PAGES (privacy, terms, corporate-profile) --- */
  .max-w-\[1600px\].mx-auto.px-margin-sm { padding-left: 20px !important; padding-right: 20px !important; }
  /* Secondary page doc layout: stack sidebar */
  .lg\:grid-cols-12.gap-16 { display: flex !important; flex-direction: column !important; gap: 32px !important; }
  /* Sticky index becomes a compact accordion on mobile */
  .lg\:col-span-3.lg\:sticky { position: static !important; top: auto !important; }
  .lg\:col-span-9 { width: 100% !important; }
  /* Secondary page hero headers */
  .pt-\[160px\] { padding-top: 100px !important; }
  .pb-\[160px\] { padding-bottom: 80px !important; }
}

/* ============================================================
   SMALL PHONE: max-width 390px (iPhone SE, Galaxy A-series)
   ============================================================ */
@media (max-width: 390px) {
  #hero .t-display-hero   { font-size: 28px !important; }
  #hero .t-display-xl     { font-size: 20px !important; }
  #activities article .font-serif { font-size: 28px !important; }
  #activities .t-headline-lg { font-size: 15px !important; }
  #corporate .t-display-xl.text-gold { font-size: 24px !important; }
  footer h2.font-serif    { font-size: 22px !important; }
  .btn-primary, .btn-primary-light { padding: 15px 16px !important; font-size: 9px !important; }
  #main-nav .font-serif.text-2xl { font-size: 11px !important; }
}

/* ============================================================
   LARGE DESKTOP: min-width 1536px (wide screens)
   ============================================================ */
@media (min-width: 1536px) {
  #hero .t-display-hero { font-size: clamp(80px, 7vw, 110px) !important; }
  #hero .t-display-xl   { font-size: clamp(60px, 5.5vw, 88px) !important; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  #main-nav, .hero-section, footer, .reveal-section, .reveal-element { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main { padding: 0 !important; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #activities article img { transition: none !important; transform: none !important; }
  .reveal-section, .reveal-element { opacity: 1 !important; transform: none !important; transition: none !important; }
}