/* =====================================================
   Rambajs café shop — responsive.css
   Mobile overrides layered on top of desktop styles.
   ===================================================== */

/* ── Large desktops ──────────────────────────── */
@media (max-width:1439px){
  :root{--container:1160px}
  .section{padding:104px 0}
  .hodiny-wrap{padding:56px}
}

/* ── Small desktops & landscape tablets ──────── */
@media (max-width:1279px){
  :root{--container:960px}
  .nav-container{padding:0 32px}
  .section{padding:96px 0}
  .nav-links{gap:2px}
  .nav-links a{padding:9px 13px;font-size:0.88rem}
  .nav-cta span{display:inline}
  .menu-grid{gap:44px}
  .onas-grid{gap:60px}
  .stats-inner{padding:52px 32px;gap:28px}
  .hodiny-wrap{padding:48px;gap:48px}
}

/* ── Tablet landscape ────────────────────────── */
@media (max-width:1023px){
  :root{--container:100%}
  .nav-container{padding:0 28px}
  .section{padding:80px 0}

  /* Nav — hide center links, show hamburger */
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-cta{display:none}
  #navbar .nav-container{justify-content:space-between}

  /* Hero */
  .hero-content{padding-top:120px;padding-bottom:120px}
  .hero-title{max-width:18ch}
  .hero-blob--1{width:360px;height:360px;left:-160px}
  .hero-blob--2{width:320px;height:320px}

  /* Stats */
  .stats-inner{flex-wrap:wrap;gap:24px;padding:44px 28px}
  .stat{flex:1 1 calc(50% - 24px)}
  .stat-divider{display:none}

  /* O nás */
  .onas-grid{grid-template-columns:1fr;gap:56px}
  .onas-media{max-width:540px;margin:0 auto;padding:16px}
  .onas-features{grid-template-columns:1fr 1fr}

  /* Atmosféra */
  .section--atmosfera{padding:120px 0}
  .atmosfera-grid{grid-template-columns:repeat(2,1fr)}

  /* Menu */
  .menu-grid{grid-template-columns:1fr;gap:48px}
  .menu-grid--reverse .menu-list{order:2}
  .menu-grid--reverse .menu-visual{order:1}
  .menu-visual{min-height:360px;order:1}
  .menu-list{order:2}
  .menu-grid > .menu-list:first-child{order:2}
  .menu-grid > .menu-visual{order:1}

  /* Gallery — 2-col stacked on tablet */
  .masonry{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:220px;gap:14px}
  .tile:nth-child(1){grid-column:1 / -1;grid-row:auto}
  .tile:nth-child(2){grid-column:1;grid-row:auto}
  .tile:nth-child(3){grid-column:2;grid-row:auto}
  .tile:nth-child(4){grid-column:1;grid-row:auto}
  .tile:nth-child(5){grid-column:2;grid-row:auto}

  /* Reviews */
  .reviews-grid{grid-template-columns:repeat(2,1fr)}

  /* Hodiny */
  .hodiny-wrap{grid-template-columns:1fr;padding:44px;gap:36px}

  /* Kontakt */
  .kontakt-grid{grid-template-columns:1fr;gap:32px}
  .map-card,.map-card iframe{min-height:360px}

  /* Footer */
  .footer-inner{grid-template-columns:1.2fr 1fr 1fr;gap:40px}
  .foot-col--brand{grid-column:1 / -1;max-width:520px}
}

/* ── Tablet portrait ─────────────────────────── */
@media (max-width:767px){
  body{font-size:15px}
  .nav-container{padding:0 22px}
  .section{padding:72px 0}

  /* Hero */
  #hero{min-height:100svh}
  .hero-content{padding-top:100px;padding-bottom:100px}
  .hero-title{max-width:14ch}
  .hero-sub{max-width:44ch;font-size:1rem}
  .hero-ctas{flex-direction:column;align-items:stretch;width:100%;max-width:320px;gap:10px}
  .hero-ctas .btn{width:100%}
  .hero-meta{flex-wrap:wrap;gap:10px;font-size:0.8rem;padding:12px 16px}
  .hero-meta-divider{display:none}

  /* Stats */
  .stats-inner{flex-direction:column;align-items:flex-start;gap:22px;padding:40px 22px}
  .stat{flex:0 0 auto;width:100%}

  /* O nás */
  .onas-features{grid-template-columns:1fr;gap:6px}
  .onas-media{grid-template-columns:1fr;gap:16px;padding:10px}
  .media-card--lg,.media-card--sm{grid-column:1;margin:0;aspect-ratio:4 / 3}
  .onas-badge{right:16px;top:16px;width:86px;height:86px}
  .onas-badge-num{font-size:1.25rem}
  .onas-badge-label{font-size:0.5rem}

  /* Atmosféra */
  .section--atmosfera{padding:96px 0}
  .atmosfera-grid{grid-template-columns:1fr;gap:10px}

  /* Menu */
  .menu-tabs{width:100%;justify-content:stretch;overflow-x:auto;padding:6px;gap:4px}
  .menu-tab{flex:1;padding:11px 14px;font-size:0.86rem}
  .menu-visual{min-height:280px}
  .mi-name{font-size:1.1rem}

  /* Gallery — single column on phones */
  .masonry{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;gap:12px}
  .tile{grid-column:1 !important;grid-row:auto !important;aspect-ratio:4 / 3}

  /* Reviews */
  .reviews-grid{grid-template-columns:1fr}
  .review-card{padding:28px 24px}

  /* Hodiny */
  .hodiny-wrap{padding:32px 24px;border-radius:20px}
  .hours-day{font-size:1rem;padding:14px 6px 14px 0}
  .hours-time{font-size:0.92rem;padding:14px 0}

  /* Kontakt */
  .kontakt-info{grid-template-columns:1fr;padding:24px;gap:18px}
  .contact-form{padding:24px}
  .cf-row{grid-template-columns:1fr}
  .cf-submit{width:100%}
  .map-card,.map-card iframe{min-height:300px}

  /* Footer */
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .foot-col--brand{grid-column:1 / -1}
  .foot-legal-inner{flex-direction:column;align-items:flex-start;gap:8px;text-align:left}

  /* Typography */
  h1{font-size:clamp(2rem,9vw,3rem)}
  h2{font-size:clamp(1.6rem,5.2vw,2rem)}
  .section-heading{margin-bottom:14px}
  .section-lead{font-size:1rem}

  /* Mobile drawer tweak */
  .mobile-drawer{padding:70px 26px 30px}
}

/* ── Small phones ────────────────────────────── */
@media (max-width:479px){
  .nav-container{padding:0 18px}
  .logo-mark{width:34px;height:34px}
  .logo-mark svg{width:18px;height:18px}
  .logo-name{font-size:1.15rem}
  .logo-sub{font-size:0.55rem}

  .hero-content{padding-top:96px;padding-bottom:96px}
  .hero-label{font-size:0.7rem;padding:7px 14px}
  .hero-title{max-width:12ch}
  .hero-ctas{max-width:100%}
  .btn{padding:14px 22px;font-size:0.9rem}

  .section{padding:64px 0}
  .hodiny-wrap{padding:24px 20px}
  .kontakt-info{padding:20px}
  .review-card{padding:24px 20px}
  .reviews-aggregate{flex-direction:column;gap:4px;text-align:center}

  /* Footer */
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .foot-col--brand{grid-column:1}

  .scroll-indicator{display:none}
}

/* ── Large screens (Full HD +) ──────────────── */
@media (min-width:1440px){
  :root{--container:1360px}
  body{font-size:16.5px}
  .section{padding:128px 0}
  .hero-content{padding-top:160px;padding-bottom:160px}
  .hodiny-wrap{padding:80px}
}

/* ── Ultra-wide ─────────────────────────────── */
@media (min-width:1920px){
  :root{--container:1520px}
  body{font-size:17px}
  .section{padding:144px 0}
  .hero-content{padding-top:180px;padding-bottom:180px}
  .stats-inner{padding:72px 40px;gap:56px}
  .hodiny-wrap{padding:96px}
}

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
  .animate-up{opacity:1 !important;transform:none !important}
  .hero-blob,.onas-badge{animation:none !important}
}