/* Mobile-specific styles for AKANAYO TV */
@media (max-width:768px){
  body{font-size:15px;}
  /* Mobile hero: stack vertically with tighter spacing */
  .hero-layout{
    display:block;
    padding:12px 10px;
  }

  .hero-main{
    margin-bottom:12px;
  }

  .hero-main img{
    width:100%;
    height:auto;
    display:block;
    border-radius:8px;
    margin-top:8px;
    margin-bottom:6px;
  }

  .hero-main h1{
	font-size:clamp(1.46rem, 5.6vw, 2.12rem);
    line-height:1.15;
    margin-bottom:6px;
  }

  .hero-main p{ font-size:0.83rem; color:var(--muted-text); margin-bottom:8px; }

  .main-nav{
    overflow-x:auto;
    white-space:nowrap;
  }

  .top-bar{
    padding-inline:12px;
  }

  .story-grid{
    grid-template-columns:1fr;
    gap:12px;
    padding:0 10px;
  }

  .story-card.small{
    flex:1 1 100%;
  }

  /* story list inside hero-side: compact list items */
  .hero-side ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
  .hero-side li a{ display:block; padding:8px 10px; border-radius:8px; border:1px solid var(--chip-border); background:var(--menu-bg); color:var(--text-color); text-decoration:none; font-weight:600; }
  .hero-side li a:hover{ background:rgba(249,250,251,0.9); }

  /* reduce story thumb height on narrow screens for compact view */
  .story-thumb img{ padding-top:56%; }

  /* compact story body text */
  .story-body{ padding-top:6px; }

  /* Ensure media elements scale down nicely on small screens */
  img, picture, svg, video, iframe {
    max-width:100%;
    height:auto;
    display:block;
    object-fit:cover;
  }

  /* Tidy header controls on narrow screens */
  .top-bar{ padding:8px 12px; }
  .logo-bar{ height:40px; gap:0.5px; }
  .logo-part{ font-size:0.9rem; line-height:40px; }

  .top-right{ display:flex; gap:8px; align-items:center; }
  .top-right .header-actions{ display:none; }
  .menu-toggle{ display:inline-flex; padding:8px; }

  /* Make global menu panel more compact on phones */
  .global-menu-panel{ max-width:calc(100% - 32px); margin:0 12px; padding:12px; }

  /* Improve tappable size for nav links */
  .main-nav a{ padding:10px 12px; display:inline-block; font-size:1rem; }

  /* Ensure story thumbs maintain aspect ratio without overflow */
  .story-thumb img{ width:100%; height:auto; object-fit:cover; }
}