/* ============================================================
   TurcoLoco — Responsive overrides
   Load order: turco-styles.css → Tailwind CDN → responsive.css
   Breakpoints: tablet ≤ 1024px  |  mobile ≤ 767px
   ============================================================ */

/* ── TABLET (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {

  main {
    padding-top: 270px !important;
  }

  main section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* page-inner inside a section: neutralise its own px-[40px] if any */
  main section .page-inner,
  main > .page-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* page-inner nested inside a section that already has section padding */
  main section .page-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* sticky nav inner wrapper */
  main nav.sticky > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero flex: shrink gap */
  main section:first-of-type > .page-inner {
    gap: 32px !important;
  }

  /* Hero image box: scale down */
  main section:first-of-type .w-\[460px\] {
    width: 360px !important;
  }

  /* Hero text column (menu, sobre-nosotros): shrink alongside the growing image */
  main section:first-of-type .w-\[480px\] {
    width: 320px !important;
  }

  /* Hero image box that grows via flex-1 (menu, sobre-nosotros): cap it so text keeps room */
  main section:first-of-type .h-\[360px\],
  main section:first-of-type .h-\[340px\] {
    flex: none !important;
    width: 320px !important;
  }

  /* 4-column stats → 2 columns */
  main .grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 5-column instagram grid → 3 cols */
  main .grid-cols-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Custom 2-col grids → stack */
  main .grid-cols-\[1fr_340px\] {
    grid-template-columns: 1fr !important;
  }

  /* Large-gap containers: tighten */
  main .gap-\[64px\] {
    gap: 40px !important;
  }
}

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

  /* ── Global ── */
  main {
    padding-top: 200px !important;
  }

  main section {
    padding: 32px 16px !important;
  }

  /* page-inner inside a section: section already provides padding */
  main section .page-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* standalone page-inner as direct child of main (menu lineup divs) */
  main > .page-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* sticky nav inner wrapper */
  main nav.sticky > div {
    overflow-x: auto !important;
    padding: 0 8px !important;
  }
  main nav.sticky a {
    padding: 12px 14px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* ── Hero: text + image → stacked ── */
  main section:first-of-type > .page-inner {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Hero image box (sobre-nosotros, menu): full width */
  main section:first-of-type .w-\[460px\] {
    width: 100% !important;
    height: 220px !important;
  }

  /* Hero text column (menu, sobre-nosotros): full width when stacked */
  main section:first-of-type .w-\[480px\] {
    width: 100% !important;
  }

  /* Hero image box that grows via flex-1 (menu, sobre-nosotros): full width when stacked */
  main section:first-of-type .h-\[360px\],
  main section:first-of-type .h-\[340px\] {
    flex: none !important;
    width: 100% !important;
    height: 220px !important;
  }

  /* Hero info-card / platform-tile wrapper (contacto, social-media): full width, no fixed height */
  main section:first-of-type .w-\[380px\] {
    width: 100% !important;
  }

  /* Hero image sub-grid (sobre-nosotros 2-col photo) */
  main section:first-of-type .grid {
    grid-template-columns: 1fr 1fr !important;
    height: 200px !important;
  }

  /* ── Font sizes ── */
  main h1.text-\[96px\] {
    font-size: 52px !important;
    line-height: 0.92 !important;
  }

  main h2.text-\[88px\],
  main h2.text-\[80px\],
  main h2.text-\[72px\] {
    font-size: 48px !important;
    line-height: 0.88 !important;
  }

  main h2.text-\[62px\],
  main h2.text-\[56px\],
  main h2.text-\[52px\] {
    font-size: 36px !important;
  }

  main h2.text-\[44px\] {
    font-size: 30px !important;
  }

  main h3.text-\[44px\] {
    font-size: 30px !important;
  }

  main h3.text-\[28px\] {
    font-size: 24px !important;
  }

  /* ── ALL multi-column grids → single column (general rule first) ── */
  main .grid-cols-3,
  main .grid-cols-2,
  main .grid-cols-\[1\.4fr_1fr_1fr\],
  main .grid-cols-\[1\.1fr_0\.9fr\],
  main .grid-cols-\[1fr_340px\] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Instagram 5-col → 2 cols */
  main .grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }

  /* Stats 4-col → 2 cols */
  main .grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* TikTok 3-clip grid: keep 3-col (higher specificity exception) */
  main .grid-cols-3.gap-\[6px\] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* TikTok + Facebook two-col section → stacked */
  main .grid-cols-2.gap-\[48px\] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Social media hero platform tiles: keep 2-col (last wins) */
  main section:first-of-type .grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  /* ── Menu: Döner featured card flex row → column ── */
  main section#doner .flex.overflow-hidden {
    flex-direction: column !important;
  }
  main section#doner .flex.overflow-hidden > .flex-none {
    width: 100% !important;
    height: 180px !important;
  }

  /* ── Flex sections with large gap → column ── */
  main .flex.gap-\[64px\],
  main .flex.gap-\[56px\] {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* ── Fixed-width side panels: full width ── */
  main .w-\[460px\],
  main .w-\[480px\],
  main .w-\[380px\],
  main .w-\[340px\],
  main .w-\[383px\] {
    width: 100% !important;
  }

  /* ── Hero max-width text paragraphs ── */
  main .max-w-\[400px\],
  main .max-w-\[380px\],
  main .max-w-\[360px\] {
    max-width: 100% !important;
  }

  /* ── Logo-bottom: smaller on mobile ── */
  main img[src*="logo-bottom"] {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* ── ComunaProject: 10% badge reposition ── */
  .cp-pct-badge {
    bottom: 8px !important;
    right: 8px !important;
    width: 80px !important;
    height: 80px !important;
  }
  .cp-pct-badge .font-display-lg { font-size: 24px !important; }

  /* ── ComunaProject: hero min-height + headline ── */
  #cp-hero { min-height: 380px !important; }
  .cp-hero-h1 { font-size: 48px !important; }

  /* ── ComunaProject: stat boxes font ── */
  .cp-stat-num { font-size: 56px !important; }

  /* ── ComunaProject: transparency CTA flex → column ── */
  .cp-transp {
    flex-direction: column !important;
    gap: 16px !important;
  }
}