/* ============================================================ The timeline + studio photo section, balanced (2026-09-30). Made on
   Be a Guest's "What One Hour of Your Time Gets You" ("this section design is good I think it just need a bit improvment"), then
   "apply the same design if this type of section does exist on the website": About's "What You Get on Every Episode Page".
   Linked after ot-pages.css on those two pages, in its own file (like ot-guest.css / ot-about.css) because other work edits
   ot-pages.css. Only on sections marked .ab4-get--split, so the kept backups and review pages still show the section as it was.
   Layout as before (heading, the green timeline, a closing card, the studio photo on the right), two changes. (1) The columns fill
   the wrap (the list stopped ~470px in and the photo sat at the far right, 290px of nothing between); the photo (4:5, B&W) takes the
   wider column on the text column's centre line, about as tall as it. (2) The closing text is a deep-green card, like every side
   panel on the site, with a white glyph in a green circle (.ab4-get__ic: Be a Guest a link, About a page of text; Lucide, in each
   page's sprite). The pages before: be-a-guest/index.before-gets.html, about/index.before-get.html. */
@media (min-width:961px){
  .ab4-get--split .grid{grid-template-columns:minmax(0,1fr) minmax(0,540px); gap:80px; align-items:center}
  .ab4-get--split .host__cut{width:100%; align-self:center}
}
/* from 1101 the photo is exactly as tall as the text column (heading to the card's foot): Be a Guest's five points and About's four
   gave 706 and 604px, where a 4:5 photo (675) overhung About's by 35px each end */
@media (min-width:1101px){ .ab4-get--split .host__cut{align-self:stretch; aspect-ratio:auto; height:auto; min-height:440px} }
@media (min-width:961px) and (max-width:1100px){ .ab4-get--split .grid{grid-template-columns:minmax(0,1fr) 400px; gap:48px} }
.ab4-get--split .note-panel{display:grid; grid-template-columns:44px minmax(0,1fr); gap:18px; align-items:start; padding:24px 26px; border:0; color:#fff;
  background:linear-gradient(180deg,#1B4F31 0,#164328 100%); box-shadow:0 30px 60px -36px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1)}
.ab4-get--split .note-panel p{color:rgba(255,255,255,.84)} .ab4-get--split .note-panel strong{color:#fff}
.ab4-get__ic{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--green-ui); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 24px -12px rgba(0,0,0,.6)}
.ab4-get__ic svg{width:20px; height:20px}
@media (max-width:700px){ .ab4-get--split .note-panel{grid-template-columns:1fr; gap:14px; padding:22px} }