/* Global responsive safety layer — loaded after all page styles */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}
.ih-wrap,.wrap,.reset-shell,.portal-shell,.ih-global-topbar-inner{min-width:0}
.ih-featured,.ih-card,.ih-tools,.ih-search-wrap,.ih-countdown-banner,.ih-timeline,.ih-saved-section,.ih-matcher,.series-card,.portal-card{min-width:0;max-width:100%}

/* Tablet and phone header: one controlled shell on every page */
@media(max-width:900px){
  .ih-global-topbar{position:sticky!important;top:0!important}
  .ih-global-topbar-inner{
    width:min(100% - 24px,1180px)!important;
    height:auto!important;
    min-height:0!important;
    padding:10px 0 11px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand admin" "nav nav"!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:10px!important;
  }
  .ih-global-brand{
    grid-area:brand!important;
    width:145px!important;
    height:39px!important;
    min-width:0!important;
  }
  .ih-global-brand img{
    width:auto!important;
    height:39px!important;
    max-width:145px!important;
  }
  .ih-global-admin{
    grid-area:admin!important;
    justify-self:end!important;
    min-width:0!important;
    min-height:40px!important;
    padding:9px 13px!important;
    font-size:11px!important;
  }
  .ih-global-nav{
    grid-area:nav!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .ih-global-tab{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:9px 5px!important;
    font-size:clamp(10.5px,2.8vw,12px)!important;
    line-height:1.1!important;
    text-align:center!important;
  }
  .ih-global-badge{top:-6px!important;right:2px!important}
}

/* Main programme experience */
@media(max-width:760px){
  .ibrah-hub{padding:30px 12px 52px!important}
  .ih-wrap{width:100%!important;max-width:100%!important}
  .ih-tabs{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    padding:5px!important;
    margin-bottom:30px!important;
  }
  .ih-tab-btn{
    min-width:0!important;
    width:100%!important;
    padding:12px 7px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }
  .ih-header h1{font-size:clamp(32px,10vw,44px)!important;line-height:1.04!important}
  .ih-tools{width:100%!important;display:block!important;margin-bottom:14px!important}
  .ih-search-wrap,.ih-search{width:100%!important;max-width:100%!important}
  .ih-search{padding:15px 16px 15px 46px!important;font-size:15px!important}
  .ih-quick{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    gap:8px!important;
    padding:0!important;
    margin-bottom:30px!important;
  }
  .ih-quick>span{width:100%!important;margin:0 0 2px!important}
  .ih-quick button{font-size:12px!important;padding:9px 12px!important;white-space:normal!important}
  .ih-featured{width:100%!important;margin-bottom:52px!important;border-radius:22px!important}
  .ih-featured-image{width:100%!important;min-height:0!important;aspect-ratio:4/5!important}
  .ih-featured-image img{width:100%!important;height:100%!important;object-fit:cover!important}
  .ih-featured-content{padding:23px!important;min-width:0!important}
  .ih-featured h2{font-size:clamp(31px,9vw,40px)!important;overflow-wrap:anywhere!important}
  .ih-featured-bottom{width:100%!important;gap:16px!important}
  .ih-featured-bottom .ih-btn{width:100%!important}
  .ih-grid{width:100%!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
  .ih-grid>*{min-width:0!important;width:100%!important}
  .ih-card h3{overflow-wrap:anywhere}

  .ih-countdown-banner{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
    padding:19px 17px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .ih-countdown-banner>*{min-width:0!important}
  .ih-countdown-banner strong{font-size:19px!important;overflow-wrap:anywhere!important}
  .ih-countdown-units{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .ih-countdown-units>span{min-width:0!important;width:100%!important;padding:9px 4px!important}
  .ih-countdown-units b{font-size:18px!important}
  .ih-countdown-banner>a{width:100%!important;text-align:center!important;padding:13px 14px!important}

  .ih-timeline{width:100%!important;padding:21px 15px!important;border-radius:22px!important;overflow:hidden!important}
  .ih-section-head h2{font-size:clamp(27px,8vw,36px)!important;overflow-wrap:anywhere!important}
  .ih-timeline-track:before{left:51px!important}
  .ih-timeline-item{grid-template-columns:38px minmax(0,1fr)!important;gap:24px!important;padding-bottom:27px!important}
  .ih-timeline-item .ih-dot{left:45px!important}
  .ih-timeline-item h3{font-size:20px!important;overflow-wrap:anywhere!important}
  .ih-mini-countdown{width:100%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  .ih-mini-countdown>span{min-width:0!important;padding:8px 3px!important}

  .ih-matcher{width:100%!important;padding:23px 16px!important;border-radius:22px!important;overflow:hidden!important}
  .ih-matcher-head{display:block!important}
  .ih-question h3{font-size:21px!important}
  .ih-option{padding:14px!important}
  .ih-result-card{padding:20px 15px!important}
  .ih-result-card h3{font-size:29px!important;overflow-wrap:anywhere!important}
  .ih-score-row{grid-template-columns:minmax(86px,115px) minmax(0,1fr) 38px!important;gap:7px!important;font-size:12px!important}
  .ih-score-row>span{overflow-wrap:anywhere!important}
  .ih-result-actions{flex-direction:column!important}
  .ih-result-actions>*{width:100%!important;text-align:center!important;justify-content:center!important}

  .ih-saved-section{width:100%!important;margin:42px 0!important}
  .ih-saved-item{gap:12px!important;padding:15px!important}
  .ih-saved-item>div{min-width:0!important}
  .ih-saved-item strong,.ih-saved-item span{overflow-wrap:anywhere!important}

  .ih-modal{padding:8px!important;align-items:flex-end!important}
  .ih-modal-card{width:100%!important;max-height:92dvh!important;border-radius:22px 22px 0 0!important;overflow:auto!important}
  .ih-modal-image{width:100%!important;height:auto!important;max-height:38dvh!important;object-fit:cover!important}
  .ih-modal-content{padding:22px 18px calc(22px + env(safe-area-inset-bottom))!important}
  .ih-modal-content h2{font-size:29px!important;overflow-wrap:anywhere!important}
  .ih-assistant{right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .ih-assistant-panel{width:min(290px,calc(100vw - 24px))!important;max-height:70dvh!important;overflow:auto!important}
  .ih-visitor-popup{width:calc(100vw - 24px)!important;bottom:calc(76px + env(safe-area-inset-bottom))!important;padding:17px 42px 17px 16px!important}
}

/* Free programme library */
@media(max-width:760px){
  .hero{padding:38px 12px 30px!important}
  .hero-grid{width:100%!important;grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
  .hero h1{font-size:clamp(38px,12vw,58px)!important;letter-spacing:-2px!important;overflow-wrap:anywhere!important}
  .hero-copy{font-size:15px!important}
  .hero-note{width:100%!important;padding:18px!important;border-radius:20px!important}
  .library{padding:10px 12px 52px!important}
  .controls,.filters-panel,.control-row,.field,.field input,.field select,.reset-btn{max-width:100%!important;min-width:0!important}
  .controls{width:100%!important}
  .filters-panel{width:100%!important}
  .control-row{grid-template-columns:minmax(0,1fr)!important}
  .chips{width:100%!important;max-width:100%!important}
  .library-head{width:100%!important}
  .video-grid{width:100%!important;grid-template-columns:minmax(0,1fr)!important}
  .video-card{width:100%!important;min-width:0!important}
  .modal-panel{width:100%!important;max-width:100%!important}
}

/* RESET page */
@media(max-width:760px){
  .reset-shell{width:min(100% - 22px,1160px)!important}
  .reset-hero{padding:34px 0 30px!important}
  .reset-hero h1{font-size:clamp(3rem,18vw,5.2rem)!important}
  .reset-hero-side{padding:22px!important;border-radius:22px!important}
  .section-head h2{font-size:clamp(2.4rem,13vw,4rem)!important}
  .series-list{gap:13px!important}
  .series-card{min-width:0!important}
  .series-copy{min-width:0!important}
  .series-copy h3,.series-copy p{overflow-wrap:anywhere!important}
  .path-section{padding:54px 0!important}
  .need-list{grid-template-columns:minmax(0,1fr)!important}
}

@media(max-width:480px){
  .series-card{
    position:relative!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:12px!important;
    padding:13px!important;
  }
  .series-date{height:96px!important;border-radius:17px!important}
  .series-date b{font-size:1.55rem!important}
  .series-date span{font-size:.72rem!important;margin-top:6px!important}
  .series-copy{padding-right:34px!important}
  .series-label{font-size:.68rem!important;padding:6px 9px!important}
  .series-surah{font-size:.88rem!important}
  .series-copy h3{font-size:1.18rem!important;line-height:1.15!important}
  .series-copy p{font-size:.84rem!important}
  .series-toggle{position:absolute!important;right:10px!important;top:10px!important;width:34px!important;height:34px!important;font-size:1.1rem!important}
  .series-detail{grid-column:1/-1!important}
}

/* Program Saya */
@media(max-width:760px){
  .portal-shell{width:min(100% - 22px,980px)!important}
  .portal-hero{min-height:auto!important;padding:30px 0 48px!important}
  .portal-card{width:100%!important;grid-template-columns:minmax(0,1fr)!important;gap:25px!important;padding:21px!important;border-radius:23px!important}
  .portal-copy h1{font-size:clamp(3rem,16vw,4.4rem)!important}
  .portal-copy p{font-size:1rem!important}
  .portal-preview{padding:21px!important;border-radius:21px!important}
}

@media(max-width:390px){
  .ih-global-topbar-inner{width:calc(100% - 18px)!important}
  .ih-global-brand{width:120px!important;height:34px!important}
  .ih-global-brand img{height:34px!important;max-width:120px!important}
  .ih-global-admin{padding:8px 10px!important;font-size:10.5px!important;min-height:36px!important}
  .ih-global-nav{gap:4px!important}
  .ih-global-tab{min-height:38px!important;padding:8px 3px!important;font-size:10px!important}
  .ih-global-badge{font-size:6.5px!important;padding:3px 4px!important;right:1px!important}
  .ibrah-hub{padding-inline:10px!important}
  .ih-countdown-banner{padding:17px 14px!important}
  .ih-countdown-units{gap:4px!important}
  .ih-countdown-units small{font-size:8px!important}
  .ih-countdown-units b{font-size:16px!important}
  .ih-score-row{grid-template-columns:82px minmax(0,1fr) 34px!important}
}

@media(hover:none){
  .ih-card:hover,.ih-featured:hover,.video-card:hover,.series-card:hover,.ih-saved-item:hover{transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}