/* IALE responsive layer — loaded after the main stylesheet on every page.
   Makes every page fit phones (320px up), tablets, laptops and large screens.
   Added 24 Oct 2026. Remove the <link> to this file to roll back. */

/* ---------- Every device ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-wrap:break-word;}
img,video{max-width:100%;}
img{height:auto;}
iframe{max-width:100%;}
pre,code{white-space:pre-wrap;word-break:break-word;}
main,section,article{min-width:0;}
.seo-guide article ul{list-style:disc;padding-left:22px;}
.seo-guide article li{margin:6px 0;}

/* Wide tables scroll inside their own box instead of pushing the page sideways */
.data-table,.seo-guide table,.table-scroll{max-width:100%;}
@media (max-width:760px){
  .data-table,.seo-guide table,main table:not(.no-scroll){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal;}
  .data-table th,.data-table td,.seo-guide th,.seo-guide td{min-width:120px;}
  .data-table th:first-child,.data-table td:first-child{min-width:140px;}
}

/* Diagrams keep readable text and scroll sideways on small screens */
.diagram-shell{max-width:100%;}
@media (max-width:640px){
  .diagram-shell{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .diagram-shell svg{min-width:560px;height:auto;}
}

/* ---------- Touch screens ---------- */
@media (pointer:coarse){
  /* 16px stops iPhone Safari zooming in when a form field is tapped */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px !important;}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;}
  .text-link{padding-top:10px;padding-bottom:10px;}
  .seo-faq summary{min-height:48px;}
}

/* ---------- Tablets (641px to 1024px) ---------- */
@media (min-width:641px) and (max-width:1024px){
  .seo-tldr,.seo-author,.seo-wrap{padding-left:28px;padding-right:28px;}
}

/* ---------- Phones (640px and below) ---------- */
@media (max-width:640px){
  .split{grid-template-columns:minmax(0,1fr) !important;}
  .split > *,.grid > *,.card-grid > *{min-width:0;}
  .checks{grid-template-columns:minmax(0,1fr) !important;}
  .checks li,.checks li > *{min-width:0;}
  .ix-grid{grid-template-columns:1fr !important;}
  .ix-card{min-width:0;max-width:100%;}
  .practice-item{grid-template-columns:44px minmax(0,1fr) !important;}
  .practice-item > :nth-child(n+3){grid-column:2;}
  /* Course list rows: code and title on top, duration and Enrol button beneath */
  .cat-list li{grid-template-columns:36px minmax(0,1fr) auto !important;column-gap:10px;row-gap:8px;}
  .cat-list li > *{min-width:0;}
  .cat-list li > :nth-child(2){grid-column:2 / -1;}
  .cat-list li > :nth-child(3){grid-column:2;align-self:center;}
  .cat-list li > :nth-child(4){grid-column:3;}

  /* Search-visibility blocks: more reading width on phones */
  .seo-wrap,.seo-tldr,.seo-author,.seo-guide article{padding-left:16px;padding-right:16px;}
  .seo-tldr__box{padding:18px 16px 18px 18px;}
  .seo-tldr__box ul{padding-left:18px;}
  .seo-guide p,.seo-guide li{font-size:16px;line-height:1.68;}
  .seo-guide .seo-cta-band{padding:22px 18px;}
  .seo-guide .seo-cta-band a{display:block;text-align:center;margin:10px 0 0;}
  .seo-faq summary{padding:16px 46px 16px 16px;font-size:16px;}
  .seo-faq .seo-ans{padding:0 16px 16px;}
  .seo-hero p{font-size:16.5px;}
  .seo-press{grid-template-columns:1fr;}

  /* The AI Toolkit page */
  .tk-wrap{padding-left:16px !important;padding-right:16px !important;}
  .tk-jump a{padding:10px 16px;font-size:14px;}
  .tk-btns .tk-btn{flex:1 1 100% !important;text-align:center;}

  /* Interactive tools: toolbars wrap instead of overflowing */
  .topbar:has(.stepper),.topbar:has(.clock),.toolbar:has(.pill),.toolbar:has(.btn){flex-wrap:wrap;gap:8px;}
  .stepper{flex-wrap:wrap;max-width:100%;}
  .screen .grid{grid-template-columns:minmax(0,1fr) !important;}
  .screen .card > div{flex-wrap:wrap;gap:6px;}
  .roles{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .roles > *{min-width:0;}
}

/* ---------- Small phones (380px and below) ---------- */
@media (max-width:380px){
  .brand{gap:8px;}
  .brand img{height:40px;}
  .brand-word b{font-size:16px;}
  .brand-word small,.brand-word span{font-size:8px;letter-spacing:.12em;}
  .burger{width:40px;}
  .seo-hero h1,.tk-hero h1{font-size:30px;}
}

/* ---------- Large screens ---------- */
@media (min-width:1600px){
  .seo-tldr,.seo-author{max-width:1200px;}
}