/* ==========================================================================
   TheCinemaPost — Smart Responsive Layer
   Fluid typography + targeted mobile tuning on top of Tailwind.
   ========================================================================== */

html, body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { width: 100%; max-width: 100vw; box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

/* Fluid type scale — clamp(min, preferred, max) */
:root {
  --fs-xs:   clamp(0.68rem, 0.62rem + 0.30vw, 0.75rem);
  --fs-sm:   clamp(0.78rem, 0.72rem + 0.35vw, 0.875rem);
  --fs-base: clamp(0.88rem, 0.80rem + 0.40vw, 1rem);
  --fs-lg:   clamp(1.00rem, 0.88rem + 0.55vw, 1.125rem);
  --fs-xl:   clamp(1.10rem, 0.95rem + 0.80vw, 1.25rem);
  --fs-2xl:  clamp(1.25rem, 1.05rem + 1.10vw, 1.5rem);
  --fs-3xl:  clamp(1.45rem, 1.15rem + 1.50vw, 1.875rem);
}

/* ===== MOBILE (<= 640px) ===== */
@media (max-width: 640px) {
  section { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .py-6 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .gap-6 { gap: 1rem !important; }
  .gap-5 { gap: 0.875rem !important; }
  .gap-4 { gap: 0.75rem !important; }

  h1 { font-size: var(--fs-3xl) !important; line-height: 1.15 !important; letter-spacing: -0.01em; }
  h2 { font-size: var(--fs-2xl) !important; line-height: 1.2  !important; letter-spacing: -0.005em; }
  h3 { font-size: var(--fs-lg)  !important; line-height: 1.25 !important; }
  h4 { font-size: var(--fs-base)!important; line-height: 1.3  !important; }

  .text-xs   { font-size: var(--fs-xs)   !important; }
  .text-sm   { font-size: var(--fs-sm)   !important; }
  .text-base { font-size: var(--fs-base) !important; }
  .text-lg   { font-size: var(--fs-lg)   !important; }
  .text-xl   { font-size: var(--fs-xl)   !important; line-height: 1.25 !important; }
  .text-2xl  { font-size: var(--fs-2xl)  !important; line-height: 1.2  !important; }
  .text-3xl  { font-size: var(--fs-3xl)  !important; line-height: 1.15 !important; }

  /* Section title accent bar */
  h2 .w-1.h-6 { width: 3px !important; height: 1.1rem !important; }

  /* Navbar */
  nav .h-16 { height: 3.25rem !important; }
  nav img.h-9 { height: 1.85rem !important; max-width: 150px !important; }
  nav .w-9.h-9 { width: 1.85rem !important; height: 1.85rem !important; }
  nav .text-lg { font-size: 0.95rem !important; }

  /* Hero slider */
  .relative.rounded-2xl[style*="height: 420px"] { height: 250px !important; }
  .relative.rounded-2xl[style*="min-height:420px"] { min-height: 250px !important; }
  .relative.rounded-2xl h1 { font-size: var(--fs-lg) !important; }
  .relative.rounded-2xl p  { font-size: var(--fs-xs) !important; }
  .relative.rounded-2xl .p-5 { padding: 0.75rem !important; }
  .relative.rounded-2xl .pb-10 { padding-bottom: 1.1rem !important; }
  .relative.rounded-2xl .w-9.h-9 { width: 2rem !important; height: 2rem !important; }

  /* Sidebar cards */
  .bg-cinema-card.rounded-xl .p-4 { padding: 0.75rem !important; }
  .font-heading.text-2xl { font-size: 1.3rem !important; }

  /* Category strip */
  section.sticky.top-16 button,
  section.sticky.top-16 a {
    font-size: 10.5px !important;
    padding: 0.3rem 0.7rem !important;
    letter-spacing: 0.06em;
  }
  section.sticky.top-16 .py-2\.5 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }

  /* Post cards */
  article.post-card h3, .post-card h3 { font-size: var(--fs-sm) !important; line-height: 1.3 !important; }
  article.post-card { border-radius: 0.625rem; }

  /* Box office */
  #box-office-chart article h3 { font-size: var(--fs-sm) !important; }
  #box-office-chart .w-8.h-8 { width: 1.75rem !important; height: 1.75rem !important; font-size: 11px !important; }

  /* Editor's picks */
  #editors-picks article { width: 10.5rem !important; }
  #editors-picks h4 { font-size: 11.5px !important; }

  /* Footer */
  footer .grid { gap: 1.25rem !important; }

  button, .btn, a.btn { min-height: 36px; }
}

/* ===== EXTRA-SMALL (<=380px) ===== */
@media (max-width: 380px) {
  .px-4 { padding-left: 0.55rem !important; padding-right: 0.55rem !important; }
  nav .h-16 { height: 3rem !important; }
  nav img.h-9 { max-width: 120px !important; }
  .relative.rounded-2xl[style*="height: 420px"] { height: 220px !important; }
  section.sticky.top-16 button,
  section.sticky.top-16 a { font-size: 9.5px !important; padding: 0.25rem 0.55rem !important; }
}

/* ===== TABLET (641px – 1024px) ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  .relative.rounded-2xl[style*="height: 420px"] { height: 360px !important; }
  /* Avoid horizontal overflow from sticky strips on tablets */
  section.sticky.top-16 { overflow-x: auto; }
}

/* ===== LAPTOP / DESKTOP (>=1280px) — keep content centered + comfortable ===== */
@media (min-width: 1280px) {
  main { max-width: 1440px; margin-inline: auto; }
}

/* ===== Touch-device niceties ===== */
@media (hover: none) and (pointer: coarse) {
  .hover\:-translate-y-0\.5:hover { transform: none !important; }
  .group:hover .group-hover\:scale-105 { transform: scale(1) !important; }
  /* Bigger tap targets */
  a, button { touch-action: manipulation; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Off-screen sections render lazily — big paint perf win on long pages */
@supports (content-visibility: auto) {
  main > section,
  .post-card-grid,
  footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
  }
}

/* Avoid CLS for images that declare aspect ratio */
img[width][height] { height: auto; }

/* Scrollbar hide utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }