/* ==========================================================================
   RANO CHIDIYA — RESPONSIVE STYLES
   Tablet and mobile adjustments (Bootstrap breakpoints: lg=992, md=768, sm=576)
   ========================================================================== */

/* ---------- Tablet (<=991px) ---------- */
@media (max-width: 991.98px){
  .rano-nav-links{ gap:0; text-align:center; margin-top: 16px; }
  .rano-nav-links .nav-link{ font-size:.9rem; }
  .rano-nav-actions{ margin-top:14px; justify-content:center; width:100%; }

  .hero-section{ padding-top: 140px; text-align:center; }
  .hero-section.has-banner-image{ min-height: 520px; }
  .hero-buttons{ justify-content:center; }
  .hero-official, .hero-subtitle{ margin-left:auto; margin-right:auto; }
  .hero-art{ margin-top: 40px; max-width: 480px; margin-inline:auto; }

  .info-grid-section .col-lg-4{ margin-bottom: 6px; }
}

/* ---------- Small tablet / large phone (<=767px) ---------- */
@media (max-width: 767.98px){
  .section-pad{ padding: 50px 0; }
  .section-heading{ font-size: 1.5rem; gap:10px; margin-bottom: 28px; }

  .hero-title{ -webkit-text-stroke: 2px #1c3d6e; }
  .hero-eyebrow{ font-size:1rem; padding: 6px 18px; }
  .hero-subtitle{ font-size:.9rem; }

  .story-card{ flex-basis: 150px; }
  .story-card-media{ height:110px; }
  .story-icon{ font-size:2.2rem; }

  .character-card{ flex-basis: 110px; }
  .character-ring{ width:96px; height:96px; }
  .character-bird{ width:60px; height:60px; }

  .video-card{ height:140px; }

  .footer-subscribe-bar{ flex-direction:column; text-align:center; }
  .footer-brand, .footer-social{ justify-content:center; }
  .footer-brand{ justify-content:center; }
}

/* ---------- Phone (<=575px) ---------- */
@media (max-width: 575.98px){
  .rano-navbar{ padding: 6px 0; }
  .brand-text{ font-size:1.05rem; }
  .brand-badge{ width:40px; height:40px; }
  .brand-bird{ width:28px; height:28px; }

  .hero-section{ padding-top: 120px; padding-bottom: 50px; }
  .hero-section.has-banner-image{ min-height: 420px; }
  .hero-title{ font-size: 2.3rem; }
  .hero-buttons{ flex-direction:column; align-items:stretch; }
  .rano-btn{ justify-content:center; width:100%; }
  .hero-buttons .rano-btn{ width:100%; }

  .story-card{ flex-basis: 130px; }
  .story-card-media{ height:96px; }
  .story-icon{ font-size:1.9rem; }
  .story-card-label{ font-size:.82rem; padding:10px 6px; }

  .carousel-arrow{ width:38px; height:38px; }

  .character-card{ flex-basis: 96px; }
  .character-ring{ width:80px; height:80px; border-width:4px; }
  .character-bird{ width:50px; height:50px; }
  .character-name{ font-size:.78rem; }

  .video-card{ height:120px; }
  .video-play{ width:44px; height:44px; font-size:1rem; }
  .video-title{ font-size:.7rem; }

  .info-panel{ padding: 26px 20px; }
  .merch-grid{ grid-template-columns: repeat(2,1fr); }

  .copyright-title{ font-size:1.2rem; justify-content:center; text-align:center; }
  .copyright-band .row > div{ text-align:center; }

  .back-to-top{ right:14px; bottom:14px; width:44px; height:44px; }
}

/* ---------- Landscape safety for hero on short mobile screens ---------- */
@media (max-width: 767.98px) and (max-height: 480px){
  .hero-section{ padding-top: 110px; }
}

/* ---------- Print ---------- */
@media print{
  .rano-navbar, .back-to-top, .scene-decor, .hero-sky{ display:none !important; }
}

/* extra blog/page responsive tweaks */
@media (max-width: 767.98px){
  .rc-content-wrap{ padding-top: 130px; }
  .rc-single-content, .rc-page-content{ padding: 22px; }
}