/* =========================================================
   PETROSAMOIRIDIS.COM — SITEWIDE RESPONSIVE v50
   Desktop >= 1101px | Tablet 768–1100px | Mobile <= 767px
   ========================================================= */

:root{
  --sr-page-x: clamp(18px,5vw,72px);
  --sr-card-radius: 18px;
}
html{max-width:100%;overflow-x:hidden}
body{max-width:100%;overflow-x:hidden}
img,video,svg,canvas{max-width:100%;height:auto}
table{max-width:100%}
math,.pm-math{max-width:100%}
*{min-width:0}

/* Safe long-content behavior */
pre,code,.collision-equation,.formula-card,.math-block,.equation,.table-wrap{
  max-width:100%;
}
pre,.table-wrap,.math-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ---------- DESKTOP >= 1101 ----------
   v61 QC: intentionally NO global sizing overrides here.
   Desktop uses each page's original pre-responsive CSS (v45-era scale).
   Tablet/mobile below remain unchanged.
   ---------- */
@media (min-width:1101px){
  /* Safety only: prevent content overflow without changing original dimensions. */
  .reading-content,.lesson-content{min-width:0}
  img,svg,video,canvas{max-width:100%}
}

/* ---------- TABLET 768–1100 ---------- */
@media (min-width:768px) and (max-width:1100px){
  .section-pad{
    padding-left:5vw!important;
    padding-right:5vw!important;
  }

  .header{
    padding-left:28px!important;
    padding-right:28px!important;
    gap:18px!important;
  }
  .header .brand-personal strong{
    font-size:.9rem!important;
    letter-spacing:.055em!important;
  }
  .header .brand-personal small{
    font-size:.62rem!important;
    letter-spacing:.03em!important;
  }
  .nav{gap:14px!important}
  .nav>a,.nav summary{font-size:.82rem!important}

  .hero,.lesson-hero,.article-hero{
    padding-left:5vw!important;
    padding-right:5vw!important;
  }
  .hero h1,.lesson-hero h1,.article-hero h1{
    font-size:clamp(2.5rem,5.5vw,4.2rem)!important;
  }

  .reading-layout{
    display:block!important;
    padding-left:5vw!important;
    padding-right:5vw!important;
  }
  .reading-rail{display:none!important}
  .reading-content,.lesson-content{
    width:100%!important;
    max-width:none!important;
  }

  .material-grid,
  .article-grid,
  .experiment-grid,
  .cards-grid,
  .grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .school-calendar .countdown-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .school-calendar .calendar-board{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* ---------- MOBILE <= 767 ---------- */
@media (max-width:767px){
  body{font-size:16px}

  .section-pad{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  /* Header / brand */
  .header{
    min-height:68px!important;
    padding:10px 18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  .header .brand{
    min-width:0!important;
    max-width:calc(100% - 58px)!important;
  }
  .header .brand-personal{
    display:block!important;
    min-width:0!important;
  }
  .header .brand-personal strong{
    display:block!important;
    font-size:.74rem!important;
    line-height:1.15!important;
    letter-spacing:.05em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .header .brand-personal small{
    display:block!important;
    margin-top:3px!important;
    font-size:.51rem!important;
    line-height:1.15!important;
    letter-spacing:.015em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .header .menu{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
    font-size:1.65rem!important;
    line-height:1!important;
  }

  /* Navigation drawer */
  .header .nav{
    max-width:100vw!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .nav-dropdown-panel,
  .nav-submenu-panel{
    max-width:calc(100vw - 36px)!important;
  }

  /* Generic hero */
  .hero,.lesson-hero,.article-hero{
    display:block!important;
    padding:34px 20px 30px!important;
  }
  .hero-copy,.lesson-hero-copy,.article-hero-copy{
    width:100%!important;
    max-width:none!important;
  }
  .hero h1,.lesson-hero h1,.article-hero h1{
    font-size:clamp(2rem,10vw,3rem)!important;
    line-height:1!important;
    overflow-wrap:break-word;
  }
  .hero p,.lesson-hero p,.article-hero p{
    font-size:.98rem!important;
    line-height:1.58!important;
  }

  /* Main content */
  .reading-layout{
    display:block!important;
    padding:34px 20px 54px!important;
  }
  .reading-rail{display:none!important}
  .reading-content,.lesson-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .reading-content section,
  .lesson-content section{
    min-width:0!important;
  }
  .reading-content section>h2,
  .lesson-content section>h2,
  .section h2{
    font-size:clamp(1.75rem,8vw,2.55rem)!important;
    line-height:1.06!important;
    overflow-wrap:break-word!important;
  }
  .reading-content section>p,
  .lesson-content section>p,
  .reading-intro{
    font-size:1rem!important;
    line-height:1.7!important;
  }
  .reading-kicker,.eyebrow{
    font-size:.67rem!important;
    line-height:1.4!important;
    letter-spacing:.09em!important;
  }

  /* Grids -> 1 column */
  .material-grid,
  .article-grid,
  .experiment-grid,
  .cards-grid,
  .grid-2,
  .grid-3,
  .collision-examples,
  .sign-grid,
  .energy-comparison,
  .energy-grid-v44,
  .collision-grid-v38,
  .collision-theory-v38,
  .footer-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  .material-card,.article-card,.experiment-card,.card,
  .energy-card-v44,.collision-card-v38{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }

  /* Tabs / filters */
  .tabs,.material-main-tabs,.material-subtabs,
  .filter-group,.school-hub-bar{
    flex-wrap:wrap!important;
    gap:7px!important;
  }
  .tabs button,.material-subtabs button,.filter-btn{
    font-size:.78rem!important;
    padding:8px 10px!important;
  }

  /* Calendar / School Hub */
  .school-calendar{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .school-calendar .calendar-top{
    display:block!important;
  }
  .school-calendar .countdown-grid{
    grid-template-columns:1fr!important;
  }
  .school-calendar .calendar-board{
    grid-template-columns:1fr!important;
  }
  .school-year-progress-card{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .sy-progress-end{text-align:left!important}
  .month-head{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .month-nav-title{
    width:100%!important;
    flex-wrap:wrap!important;
  }
  .calendar-grid,.cal-grid{
    font-size:.8rem!important;
  }

  /* Forms / controls */
  input,select,textarea,button{
    max-width:100%;
  }
  input,select,textarea{
    font-size:16px!important; /* prevents iOS zoom */
  }

  /* Math and formulas */
  .formula-card,.collision-formula-card,.math-card,.equation-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .collision-equation,.equation,.math-block{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
  .collision-equation math,
  .equation math,
  .math-block math{
    width:max-content!important;
    min-width:100%!important;
    max-width:none!important;
  }

  /* Tables */
  table{
    display:block!important;
    width:100%!important;
    overflow-x:auto!important;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }

  /* Notes / callouts */
  .mm-note,.syllabus-note,.collision-quote,.icon-box,.callout{
    max-width:100%!important;
    min-width:0!important;
    padding:16px!important;
  }

  /* Buttons */
  .primary,.secondary,.material-open,.more-v38,
  .hero-actions a,.button,.btn{
    min-height:44px;
  }

  /* Footer */
  footer,.site-footer{
    overflow:hidden;
  }
}

/* ---------- VERY SMALL PHONES <= 390 ---------- */
@media (max-width:390px){
  .section-pad{padding-left:16px!important;padding-right:16px!important}
  .header{padding-left:14px!important;padding-right:14px!important}
  .header .brand-personal strong{font-size:.68rem!important}
  .header .brand-personal small{font-size:.46rem!important}
  .hero,.lesson-hero,.article-hero{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .reading-layout{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .reading-content section>h2,
  .lesson-content section>h2{
    font-size:1.7rem!important;
  }
}

/* =========================================================
   KROUSEIS-specific responsive refinements from v49
   ========================================================= */
@media (min-width:1101px){
  #momentum .collision-formula-card.primary{
    display:grid!important;
    grid-template-columns:210px minmax(0,1fr)!important;
    align-items:center!important;
    gap:28px!important;
  }
  #momentum .collision-formula-card.primary .ui-icon-label{
    position:static!important;
    margin:0!important;
    max-width:190px!important;
    font-size:.88rem!important;
    line-height:1.55!important;
    white-space:normal!important;
  }
  #momentum .collision-formula-card.primary .collision-equation{
    min-width:0!important;margin:0!important;
  }
}
@media (min-width:768px) and (max-width:1100px){
  #momentum .collision-formula-card.primary{
    display:grid!important;
    grid-template-columns:165px minmax(0,1fr)!important;
    align-items:center!important;
    gap:18px!important;
    padding:20px!important;
  }
  #momentum .collision-formula-card.primary .ui-icon-label{
    position:static!important;margin:0!important;max-width:150px!important;
    font-size:.75rem!important;line-height:1.48!important;white-space:normal!important;
  }
  #momentum .collision-formula-card.primary math{font-size:.94rem!important}
  .collision-grid-v38{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .collision-grid-v38 .collision-card-v38:last-child{
    grid-column:1/-1;width:min(100%,620px);justify-self:center;
  }
}
@media (max-width:767px){
  #momentum .collision-formula-card,
  #momentum .collision-formula-card.primary{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:18px!important;
  }
  #momentum .collision-formula-card .ui-icon-label,
  #momentum .collision-formula-card.primary .ui-icon-label{
    display:block!important;position:static!important;width:100%!important;
    max-width:none!important;margin:0!important;padding:0!important;
    font-size:.68rem!important;line-height:1.45!important;white-space:normal!important;
  }
  #momentum .collision-formula-card .collision-equation,
  #momentum .collision-formula-card.primary .collision-equation{
    width:100%!important;margin:0!important;text-align:center!important;
    overflow-x:auto!important;
  }
  #momentum .collision-formula-card math{font-size:.9rem!important}

  #plastic .collision-formula-card.primary{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:18px!important;
  }
  #plastic .collision-formula-card.primary .ui-icon-label{
    width:100%!important;max-width:none!important;font-size:.68rem!important;
  }
  #plastic .collision-formula-card.primary .final-velocity-equation{
    justify-content:flex-start!important;width:100%!important;overflow-x:auto!important;
  }
  #plastic .collision-formula-card.primary .final-velocity-equation math{
    font-size:.8rem!important;
  }
}