/* ViCamBachGiai — iPad landscape story detail.
   Mirrors the approved portrait composition without changing portrait/mobile. */
.story-landscape-meta,.story-landscape-sidebar{display:none}

/* The wrapper is layout-neutral outside landscape phones/tablets. */
.story-detail-layout,.story-detail-primary{min-width:0}

/* Phone portrait: use the full natural cover height and distribute the
   right-hand groups evenly, while keeping the action row level with the cover. */
@media (max-width:719px) and (orientation:portrait){
  .story-page .story-hero{
    --phone-cover-w:clamp(7.4rem,34vw,12.5rem);
    grid-template-columns:var(--phone-cover-w) minmax(0,1fr);
    height:calc(var(--phone-cover-w) * 1.5);
    align-items:stretch;
  }
  .story-page .story-cover{width:var(--phone-cover-w);height:100%;align-self:stretch}
  .story-page .story-cover .cover-frame{width:100%;height:100%;aspect-ratio:2/3}
  .story-page .story-info{
    height:100%;
    align-self:stretch;
    justify-content:space-between;
    gap:clamp(.42rem,1.25vh,.72rem);
  }
  .story-page .story-copy{flex:0 0 auto}
  .story-page .story-info h1{
    font-size:clamp(1.78rem,6.7vw,2.24rem);
    line-height:1.05;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .story-page .story-info .badge{font-size:clamp(.66rem,1.85vw,.76rem)}
  .story-page .story-info .by{font-size:clamp(.83rem,2.25vw,.96rem)}
  .story-page .chip{font-size:clamp(.64rem,1.85vw,.75rem)}
  .story-page .story-metrics,.story-page .story-acts{flex:0 0 auto;margin-top:0}
  .story-page .intro-card{padding:clamp(.82rem,2.4vw,1rem) clamp(.82rem,2.6vw,1.05rem)}
  .story-page .intro-title{margin-bottom:.52rem;font-size:clamp(.72rem,2vw,.82rem)}
  .story-page .intro-body{
    font-size:clamp(.82rem,2.3vw,.9rem);
    line-height:1.62;
  }
  .story-page .intro-body.is-clamp{max-height:16.2em}
  .story-page .story-tab>.info-card .info-body p{
    font-size:clamp(.78rem,2.2vw,.86rem);
    line-height:1.56;
  }

  /* Fixed phone reading scale: do not let Safari viewport sizing enlarge it. */
  .story-page .story-tab .intro-body{
    font-size:16px !important;
    line-height:1.62 !important;
  }
  .story-page .story-tab .info-body p{
    font-size:15px !important;
    line-height:1.58 !important;
  }
  .story-page .story-tab .info-body{
    padding-left:0 !important;
    border-left:0 !important;
  }
}

@media (min-width:640px) and (max-width:1366px) and (orientation:landscape){
  .story-page{
    width:min(100% - 1.5rem,1240px);
    max-width:1240px;
    padding-top:.9rem;
  }

  .story-detail-layout.is-intro{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(10.5rem,15.5vw,12.5rem);
    gap:clamp(.7rem,1.35vw,1rem);
    align-items:stretch;
  }

  .story-detail-primary{min-width:0}

  .story-page .story-hero{
    --landscape-cover-w:clamp(13rem,23vw,15.5rem);
    display:grid;
    grid-template-columns:var(--landscape-cover-w) minmax(0,1fr);
    gap:clamp(1rem,2.2vw,1.45rem);
    height:calc(var(--landscape-cover-w) * 1.5);
    align-items:stretch;
  }

  .story-page .story-cover{
    grid-column:1;
    width:var(--landscape-cover-w);
    height:100%;
    max-width:none;
    align-self:stretch;
  }

  .story-page .story-cover .cover-frame{
    width:100%;
    height:100%;
    aspect-ratio:2/3;
    overflow:hidden;
    border-radius:11px;
  }

  .story-page .story-cover .cover-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 18%;
  }

  .story-page .story-info{
    grid-column:2;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:clamp(.32rem,.7vw,.52rem);
    height:100%;
    min-height:0;
    padding:0;
    overflow:hidden;
    align-self:stretch;
  }

  .story-page .story-copy{
    grid-row:1;
    min-width:0;
    align-self:start;
    gap:.08rem;
  }

  .story-page .story-info .badge{
    margin:0;
    font-size:.66rem;
    letter-spacing:.13em;
  }

  .story-page .story-info h1{
    max-width:50rem;
    margin:.04rem 0 .18rem;
    font-size:clamp(1.75rem,3.2vw,2.5rem);
    line-height:1.04;
    letter-spacing:-.016em;
  }

  .story-page .story-info .by{
    margin:0 0 .18rem;
    font-size:.82rem;
  }

  .story-page .story-info .tags{gap:.22rem}
  .story-page .chip{
    padding:.12rem .48rem;
    font-size:.63rem;
  }

  .story-landscape-meta{
    position:relative;
    grid-row:2;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    overflow:hidden;
    padding:.12rem 0 1.05rem;
    border:0;
    background:transparent;
  }

  .story-landscape-meta h2{
    flex:0 0 auto;
    margin:0 0 .35rem;
    color:#b9acf0;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
  }

  .story-landscape-meta .landscape-info-body{
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:0 .25rem .8rem 0;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
  }

  .story-landscape-meta .landscape-info-body::-webkit-scrollbar{display:none}

  .story-landscape-meta .landscape-info-body p{
    display:grid;
    grid-template-columns:minmax(5rem,max-content) minmax(0,1fr);
    gap:.5rem;
    margin:0 0 .28rem;
    color:#d9dceb;
    font-size:.72rem;
    line-height:1.34;
  }

  .story-landscape-meta .landscape-info-body p.landscape-info-line{display:block}

  .story-landscape-meta .landscape-info-body strong{
    color:#8991a6;
    font-size:.67rem;
    font-weight:500;
  }

  .story-landscape-meta .landscape-info-body span{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .story-landscape-meta::after{
    content:"⌄";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    color:#b9a8ff;
    font-size:.95rem;
    line-height:1;
    pointer-events:none;
    text-shadow:0 0 12px rgba(160,139,255,.38);
  }

  .story-page .story-metrics{
    grid-row:3;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    border-top:1px solid rgba(168,154,230,.18);
    border-radius:0;
    background:transparent;
    overflow:visible;
  }

  .story-page .metric{
    min-width:0;
    padding:.25rem .12rem .22rem;
    border-left:1px solid rgba(168,154,230,.14);
    background:transparent;
  }

  .story-page .metric:first-child{border-left:0}
  .story-page .metric-ico{font-size:.62rem}
  .story-page .metric b{font-size:.73rem}
  .story-page .metric small{font-size:.47rem;white-space:nowrap}

  .story-page .story-acts{
    grid-row:4;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.38rem;
    margin:0;
    padding:0;
  }

  .story-page .story-acts .btn{
    min-width:0;
    min-height:35px;
    height:35px;
    padding:0 .35rem;
    border-radius:8px;
    font-size:.66rem;
    white-space:nowrap;
  }

  .story-page .story-acts .btn:first-child{
    grid-column:auto;
    background:linear-gradient(180deg,rgba(190,177,246,.3),rgba(134,113,215,.21));
    border-color:rgba(196,181,253,.56);
    box-shadow:0 6px 16px rgba(80,62,150,.13);
  }

  .story-page .story-tabs{margin:.62rem 0 .62rem}
  .story-page .story-tabs a{
    padding:.54rem .2rem .45rem;
    font-size:.76rem;
  }

  .story-page .intro-card{padding:.95rem 1.15rem .9rem}
  .story-page .intro-title{
    margin-bottom:.5rem;
    font-size:.77rem;
  }
  .story-page .intro-body{
    max-width:68rem;
    font-size:clamp(.83rem,1.05vw,.94rem);
    line-height:1.52;
  }
  .story-page .intro-body.is-clamp{
    -webkit-line-clamp:10;
    max-height:15.2em;
  }

  .story-page .story-tab>.info-card{display:none}
  .story-page .same-author{display:none}

  .story-landscape-sidebar{
    display:block;
    min-width:0;
    height:100%;
    max-height:100%;
    padding:.95rem 0 .3rem clamp(.65rem,1.1vw,.9rem);
    border-left:1px solid rgba(168,154,230,.16);
    background:linear-gradient(90deg,rgba(14,17,31,.3),transparent 34%);
    overflow:hidden;
  }

  .story-side-scroll{
    position:sticky;
    top:.75rem;
    max-height:calc(100vh - 1.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    scroll-snap-type:y proximity;
    padding:0 .2rem 1rem 0;
    -webkit-overflow-scrolling:touch;
  }
  .story-side-scroll::-webkit-scrollbar{display:none}

  .story-side-section{scroll-snap-align:start}
  .story-side-section+.story-side-section{
    margin-top:1rem;
    padding-top:.9rem;
    border-top:1px solid rgba(168,154,230,.14);
  }
  .story-side-section h2{
    margin:0 0 .55rem;
    color:#b9a8ff;
    font-size:clamp(.62rem,.9vw,.72rem);
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
  }
  .story-side-list{display:grid;gap:.62rem}
  .story-side-card{
    display:grid;
    grid-template-columns:clamp(2.35rem,4.2vw,3rem) minmax(0,1fr);
    gap:.5rem;
    align-items:start;
    min-width:0;
    color:inherit;
    scroll-snap-align:start;
  }
  .story-side-card .cover-frame{
    width:100%;
    aspect-ratio:2/3;
    border-radius:5px;
    overflow:hidden;
  }
  .story-side-card .cover-frame img{width:100%;height:100%;object-fit:cover}
  .story-side-copy{display:flex;min-width:0;flex-direction:column;gap:.18rem;padding-top:.05rem}
  .story-side-copy b{
    overflow:hidden;
    color:#edf0f8;
    font-size:clamp(.6rem,.92vw,.71rem);
    line-height:1.3;
    font-weight:550;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .story-side-copy small{overflow:hidden;color:#9299ad;font-size:.56rem;text-overflow:ellipsis;white-space:nowrap}
  .story-side-copy em{
    align-self:flex-start;
    margin-top:.06rem;
    padding:.1rem .34rem;
    border:1px solid rgba(168,154,230,.18);
    border-radius:999px;
    color:#9da4b8;
    font-size:.49rem;
    font-style:normal;
    white-space:nowrap;
  }
}

/* Landscape phones are detected by their short viewport height.
   Width alone is unreliable on iOS because Safari can expose a wider layout viewport. */
@media (min-width:640px) and (max-width:1366px) and (max-height:600px) and (orientation:landscape){
  .story-page{padding-top:.45rem}
  .story-detail-layout.is-intro{grid-template-columns:minmax(0,1fr) clamp(9.3rem,17vw,10.25rem);gap:.65rem}
  .story-page .story-hero{--landscape-cover-w:clamp(8.7rem,19vw,10.4rem);gap:.75rem;height:calc(var(--landscape-cover-w) * 1.5)}
  .story-page .story-info{
    display:flex;
    flex-direction:column;
    height:100%;
    align-self:stretch;
    justify-content:space-between;
    gap:clamp(.38rem,1.15vh,.68rem);
  }
  .story-page .story-copy{
    flex:0 0 auto;
    min-height:0;
    overflow:hidden;
  }
  .story-page .story-info h1{
    margin:.02rem 0 .14rem;
    font-size:clamp(1.42rem,3.25vw,1.78rem);
    line-height:1.06;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .story-page .story-info .badge{font-size:.59rem}
  .story-page .story-info .by{font-size:.74rem;margin-bottom:.16rem}
  .story-page .chip{padding:.09rem .38rem;font-size:.56rem}
  .story-landscape-meta{display:none}
  .story-page .story-metrics,.story-page .story-acts{flex:0 0 auto;margin-top:0}
  .story-page .story-tabs{margin:.4rem 0}
  .story-page .story-tabs a{padding:.4rem .15rem .35rem;font-size:.64rem}
  .story-page .intro-card{min-height:clamp(8.5rem,30vh,12rem);padding:.7rem .85rem}
  .story-page .intro-body{font-size:.7rem;line-height:1.52}
  .story-page .intro-body.is-clamp{max-height:15.2em}
  .story-page .story-tab>.info-card{
    display:block;
    margin-top:.55rem;
    padding:.72rem .85rem .78rem;
    border-radius:11px;
  }
  .story-page .story-tab>.info-card .info-title{margin-bottom:.45rem;font-size:.66rem}
  .story-page .story-tab>.info-card .info-body{padding-left:.65rem}
  .story-page .story-tab>.info-card .info-body p{font-size:.7rem;line-height:1.5;margin-bottom:.28rem}
  .story-landscape-sidebar{padding-top:.55rem}
  .story-side-scroll{top:.4rem;max-height:calc(100vh - .8rem)}
  .story-side-list{gap:.5rem}

  .story-page .story-tab .intro-body{
    font-size:16px !important;
    line-height:1.62 !important;
  }
  .story-page .story-tab .info-body p{
    font-size:15px !important;
    line-height:1.58 !important;
  }
  .story-page .story-tab .info-body{
    padding-left:0 !important;
    border-left:0 !important;
  }
}

@media (min-width:1367px) and (orientation:landscape){
  .story-page{width:min(1160px,calc(100% - 5rem))}
  .story-page .story-hero{--landscape-cover-w:12.5rem}
}