/* ═══════════════════════════════════════════
   RESPONSIVE — El Rey del Taco Catering
   Breakpoints:
   1200px — large desktop
    900px — tablet landscape
    768px — tablet portrait / hamburger
    600px — large mobile
    480px — mobile
    380px — small mobile
═══════════════════════════════════════════ */

/* ── 1200px — large desktop tweaks ── */
@media (max-width: 1200px) {
  nav.site-nav { padding: 14px 32px;position: sticky; top: 0; z-index: 300; background: var(--cream-light); }
  .hero-copy   { padding: 56px 40px; }
  .hero h1     { font-size: 48px; }
  .services    { padding: 72px 40px; }
  .split-copy  { padding: 56px 40px; }
  .gallery     { padding: 72px 40px; }
}

/* ── 900px — tablet landscape ── */
@media (max-width: 900px) {
  /* NAV */
  nav.site-nav  { padding: 12px 24px;position: sticky; top: 0; z-index: 300; background: var(--cream-light); }
  .nav-links    { gap: 18px; font-size: 13px; }
  .nav-cta      { padding: 9px 16px; font-size: 13px; }

  /* HERO */
  .hero         { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy    { padding: 48px 32px 40px; }
  .hero h1      { font-size: 40px; }
  .hero p       { font-size: 15px; max-width: 100%; }
  .hero-right   { order: -1; }
  .hero-image-area { padding: 0; min-height: 300px; }
  .mascot-ring  { width: 160px; height: 160px; }

  /* BANDS */
  .intro-band   { padding: 28px 32px; flex-direction: column; gap: 16px; }
  .trust-bar    { padding: 16px 24px; gap: 16px; flex-wrap: wrap; }
  .tr-sep       { display: none; }

  /* VIDEO */
  .video-section { padding: 56px 32px; }
  .video-title   { font-size: 28px; }

  /* SERVICES */
  .services     { padding: 56px 32px; }
  .sec-title    { font-size: 30px; }
  .cards        { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* SPLIT */
  .split        { grid-template-columns: 1fr; }
  .split-img    { min-height: 240px; padding: 32px; }
  .split-copy   { padding: 40px 32px; }

  /* GALLERY */
  .gallery      { padding: 56px 32px; }
  .g-grid       { grid-template-columns: repeat(2, 1fr); }

  /* CTA */
  .cta-band     { padding: 64px 32px; }
  .cta-band h2  { font-size: 34px; }

  /* FOOTER */
  .site-footer-top { grid-template-columns: 1fr 1fr; padding: 40px 32px 28px; gap: 24px; }

  /* ABOUT */
  .about-stats  { grid-template-columns: repeat(2, 1fr); }
  .about-split  { grid-template-columns: 1fr; }
  .about-split-img { min-height: 280px; padding: 36px; }
  .about-split-circle { width: 280px; height: 280px; }
  .about-split-copy { padding: 40px 32px; }
  .about-promise { grid-template-columns: 1fr; }
  .about-promise-img { min-height: 240px; }
  .about-mv     { grid-template-columns: 1fr; }

  /* CONTACT */
  .contact-info { grid-template-columns: 1fr 1fr; padding: 32px; }
  .contact-map-inner { grid-template-columns: 1fr; }
  .contact-main { grid-template-columns: 1fr; padding: 0 32px 56px; }
  .contact-sidebar { display: none; }
  
  /* REVIEWS */
  .reviews-section        { padding: 56px 32px; }
  .reviews-title          { font-size: 30px; }
  .rr-num                 { font-size: 44px; }
  .carousel-wrap          { height: 320px; }
  .carousel-slide         { grid-template-columns: 1fr 1fr; gap:12px; }
  .carousel-slide .rc-card:nth-child(3) { display: none; }
  
  
}

/* ── 768px — tablet portrait / hamburger ── */
@media (max-width: 768px) {
  /* PATTERN */
  .pattern-strip { grid-template-columns: repeat(4, 1fr); }
  .pattern-strip .ps-cell:nth-child(n+5) { display: none; }

  /* NAV */
  nav.site-nav {
    padding: 12px 16px;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    z-index: 300;
    top: 0; background: var(--cream-light);
  }
  .logo         { gap: 10px; flex: 1; min-width: 0; }
  .logo-img     { width: 60px; height: 60px; }
  .logo-name .top { font-size: 15px; }
  .logo-name .sub { font-size: 8px; letter-spacing: 2px; }
  .nav-hamburger {
    display: flex;
    flex-shrink: 0;
    width: auto;
    max-width: 44px;
    padding: 8px;
  }
  .nav-hamburger span { width: 20px; height: 2px; }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%; left: 0;
    width: 100%;
    background: var(--cream-light);
    border-bottom: 1px solid var(--cream-mid);
    padding: 12px 20px;
    z-index: 200;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  }
  .nav-links.open { display: flex; }
  .nav-links li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--cream-mid);
    font-size: 15px;
  }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-cta { padding: 9px 14px; font-size: 12px; flex-shrink: 0; white-space: nowrap; }

  /* HERO */
  .hero         { grid-template-columns: 1fr; min-height: auto; max-height: none; }
  .hero-copy    { padding: 40px 20px; }
  .hero h1      { font-size: 34px; }
  .hero p       { font-size: 14px; }
  .hero-right   { order: -1; }
  .hero-image-area { padding: 0; min-height: 240px; }
  .mascot-ring  { width: 140px; height: 140px; }
  .mascot-ring svg { width: 56px; height: 56px; }
  .hs           { padding: 10px 8px; }
  .hs-num       { font-size: 18px; }
  .hs-label     { font-size: 10px; }

  /* BANDS */
  .intro-band   { padding: 24px 20px; flex-direction: column; gap: 14px; }
  .intro-line   { width: 40px; height: 3px; }
  .intro-band p { font-size: 14px; }
  .trust-bar    { padding: 14px 20px; gap: 12px; }
  .tr-sep       { display: none; }
  .tr-item      { font-size: 12px; }

  /* VIDEO */
  .video-section { padding: 48px 20px; }
  .video-title   { font-size: 24px; }
  .video-sub     { font-size: 14px; }
  .video-wrap { border-radius: 8px; }
  .video-wrap iframe { inset: -30px -10px; width: calc(100% + 20px); height: calc(100% + 60px); }

  /* SERVICES */
  .services     { padding: 48px 20px; }
  .sec-title    { font-size: 26px; }
  .cards        { grid-template-columns: 1fr; gap: 14px; }

  /* SPLIT */
  .split        { grid-template-columns: 1fr; }
  .split-img    { min-height: 200px; padding: 28px; }
  .split-img-ring { width: 120px; height: 120px; }
  .split-img-ring svg { width: 48px; height: 48px; }
  .split-copy   { padding: 36px 20px; }

  /* GALLERY */
  .gallery      { padding: 48px 20px; }
  .g-header h2  { font-size: 26px; }
  .g-grid       { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gallery-insta { padding: 28px 24px; }
  .gallery-insta-icon { width: 52px; height: 52px; }
  .gallery-insta-icon svg { width: 26px; height: 26px; }
  .gallery-insta-handle { font-size: 18px; }
  .gallery-insta-btn { padding: 9px 16px; font-size: 13px; }

  /* CTA */
  .cta-band     { padding: 56px 20px; }
  .cta-band h2  { font-size: 30px; }
  .cta-band p   { font-size: 14px; }
  .cta-btns     { flex-direction: column; align-items: center; }
  .cta-btns a   { width: 100%; text-align: center; padding: 14px 20px; }

  /* FOOTER */
  .site-footer-top { grid-template-columns: 1fr; padding: 32px 20px 24px; gap: 20px; }
  .site-footer-bottom { padding: 12px 20px; font-size: 11px; }

  /* ABOUT */
  .about-stats  { grid-template-columns: repeat(2, 1fr); }
  .about-band   { padding: 40px 20px; }
  .about-split-img { min-height: 240px; padding: 28px; }
  .about-split-circle { width: 260px; height: 260px; }
  .about-split-copy { padding: 36px 20px; }
  .about-promise-copy { padding: 36px 20px; }
  .about-mv-card { padding: 36px 20px; }
  .about-trust  { padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
  .about-trust-sep { display: none; }

  /* MENU */
  .packages     { grid-template-columns: 1fr; padding: 32px 20px 56px; }
  .page-header  { padding: 48px 20px 18px; min-height: 220px; }
  .page-header h1 { font-size: 34px; }
  .note-band    { padding: 14px 20px; font-size: 12px; }
  .bottom-section { grid-template-columns: 1fr; padding: 32px 20px; }

  /* CONTACT */
  .contact-info { grid-template-columns: 1fr; padding: 24px 20px; }
  .contact-social { padding: 16px 20px; gap: 10px; flex-wrap: wrap; }
  .contact-map-section { padding: 40px 20px; }
  .contact-map-inner { grid-template-columns: 1fr; gap: 24px; }
  .contact-main { grid-template-columns: 1fr; padding: 0 20px 48px; }
  .contact-sidebar { display: none; }
  .form-card    { padding: 24px 20px; }
  .form-row     { grid-template-columns: 1fr; }

  /* PAGE HERO */
  .page-hero    { padding: 0 20px 32px; min-height: 220px; }
  .page-hero-content h1 { font-size: 34px; }

  /* GALLERY PAGE */
  .gallery-wrap { padding: 0 20px 40px; }
  .gallery-insta { padding: 28px 20px; }
  .gallery-insta-btn { width: 100%; text-align: center; margin-left: 0; }
  .gallery-insta-inner { flex-direction: column; gap: 12px; }
  
  /* REVIEWS */
  .reviews-section        { padding: 48px 20px; }
  .reviews-title          { font-size: 26px; }
  .reviews-top { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px;}
  .reviews-rating { display: flex; flex-direction: column; align-items: flex-start; text-align: left;}
  .rr-num { font-size: 36px; display: block; }
  .rr-stars { display: block; font-size: 16px; margin-left: 0; }
  .rr-count { display: block; margin-top: 2px; }
  
  .carousel-wrap          { height: 300px; }
  .carousel-slide         { grid-template-columns: 1fr 1fr; gap: 10px; }
  .carousel-slide .rc-card:nth-child(3) { display: none; }
  .carousel-slide {grid-template-columns: 1fr 1fr;}
  .carousel-slide .rc-card:nth-child(3) {display: none;}
  .carousel-controls {justify-content: center;}
  .rc-card                { padding: 18px 16px; }
  .rc-text                { font-size: 12px; }
  .rc-name                { font-size: 12px; }
  
}

/* ── 600px — large mobile ── */
@media (max-width: 600px) {
  /* NAV */
  .logo-name .top { font-size: 14px; }
  .logo-name .sub { font-size: 8px; letter-spacing: 1.8px; }
  .logo-img { width: 50px; height: 50px; }

  /* HERO */
  .hero h1      { font-size: 30px; }
  .hero-image-area { min-height: 200px; }
  .mascot-ring  { width: 120px; height: 120px; }
  .hs-num       { font-size: 16px; }

  /* ABOUT */
  .about-stats  { grid-template-columns: repeat(2, 1fr); }
  .about-stat-num { font-size: 26px; }
  .about-split-circle { width: 260px; height: 260px; }
  .page-hero    { min-height: 200px; padding: 0 20px 28px; }
  .page-hero-content h1 { font-size: 32px; }

  /* CONTACT */
  .contact-hero-content h1 { font-size: 32px; }
  .ci-card      { padding: 20px 18px; }
  
  /* REVIEWS */
  .reviews-section        { padding: 40px 16px; }
  .reviews-title          { font-size: 24px; }
  .reviews-top { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px;}
  .reviews-rating { display: flex; flex-direction: column; align-items: flex-start; text-align: left;}
  .rr-num { font-size: 36px; display: block; }
  .rr-stars { display: block; font-size: 18px; margin-left: 0; }
  .rr-count { display: block; margin-top: 2px; }
  
  .carousel-wrap { height: auto; min-height: unset;}
  /* single card on mobile */
  .carousel-slide {grid-template-columns: 1fr;}
  .carousel-slide .rc-card:nth-child(2),
  .carousel-slide .rc-card:nth-child(3) {display: none;}
  .carousel-controls {justify-content: center;}
  .rc-card                { padding: 18px 16px; }
  .rc-text                { font-size: 13px; -webkit-line-clamp: 6; }
  
  /* VIDEO */
  .video-section { padding: 40px 16px; }
  .video-wrap { aspect-ratio: 16/9; }
  .video-wrap iframe { inset: -20px -8px; width: calc(100% + 16px); height: calc(100% + 40px); }
  .video-thumb { width: 100%; height: 100%; object-fit: cover; }
  
}

/* ── 480px — mobile ── */
@media (max-width: 480px) {
  /* NAV */
  nav.site-nav  { padding: 10px 14px; position: sticky; top: 0; z-index: 300; background: var(--cream-light);}
  .logo-img     { width: 44px; height: 44px; }
  .logo-name .top { font-size: 13px; }
  .logo-name .sub { font-size: 7px; letter-spacing: 1.8px; }
  .nav-cta      { padding: 8px 12px; font-size: 11px; }

  /* HERO */
  .hero h1      { font-size: 28px; }
  .hero p       { font-size: 13px; }
  .hero-image-area { min-height: 180px; }
  .mascot-ring  { width: 100px; height: 100px; }
  .hs-num       { font-size: 15px; }
  .hs-label     { font-size: 9px; }

  /* VIDEO */
  .video-section { padding: 32px 14px; }
  .video-title { font-size: 18px; }
  .video-sub { font-size: 12px; }
  .video-wrap iframe { inset: -15px -6px; width: calc(100% + 12px); height: calc(100% + 30px); }

  /* GALLERY */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery-insta { padding: 24px 20px; }
  .gallery-insta-inner { flex-wrap: wrap; gap: 16px; } 
  .gallery-insta-btn { width: 100%; text-align: center; margin-top: 4px; }

  /* CTA */
  .cta-band h2  { font-size: 26px; }
  .cta-band-img { width: 120px; height: 120px; }

  /* ABOUT */
  .about-stat-num { font-size: 24px; }
  .page-hero-content h1 { font-size: 28px; }
  .about-split-circle { width: 240px; height: 240px; }

  /* WHATSAPP */
  .wa-bubble    { padding: 14px; border-radius: 50%; }
  .wa-label     { display: none; }
  
  /* REVIEWS */
  .reviews-section        { padding: 32px 14px; }
  .reviews-title          { font-size: 22px; }
  .carousel-wrap          { height: 300px; }
  .cc-btn                 { width: 36px; height: 36px; }
  .cc-btn svg             { width: 14px; height: 14px; }
  .cc-dot                 { width: 6px; height: 6px; }
}

/* ── 380px — small mobile ── */
@media (max-width: 380px) {
  /* NAV */
  .logo-name .top { font-size: 10px; }
  .logo-name .sub { font-size: 6px; letter-spacing: 1.8px; }
  .nav-cta      { padding: 7px 10px; font-size: 11px; }

  /* HERO */
  .hero h1      { font-size: 24px; }
  .hero-image-area { min-height: 160px; }
  .hs           { padding: 8px 4px; }
  .hs-num       { font-size: 14px; }

  /* GALLERY */
  .gallery-grid { grid-template-columns: 1fr; }
  .g-grid       { grid-template-columns: 1fr; }

  /* CTA */
  .cta-band h2  { font-size: 22px; }

  /* ABOUT */
  .about-stat-num { font-size: 20px; }
  .page-hero-content h1 { font-size: 24px; }
}