/* trim-c.css — phone declutter for freelancers / companies / franchises / schools.
   Hides secondary cards and repeated mock-ups only (no HTML removed). Phones only. */
@media (max-width:759.98px){

/* ---------- FREELANCERS ---------- */
.trim-fl .hero .heroimg-pic{display:none}
.trim-fl section.hero + section.band{display:none}
.trim-fl #booking .bk-card--photo{display:none}
.trim-fl #booking .bk-card--text{margin-bottom:0}
.trim-fl #booking .sec-head.center{display:none}
.trim-fl #booking .pwx-body .fcard:nth-child(n+5){display:none}
.trim-fl #runday .sec-head p{display:none}
.trim-fl #parentapp .pf-app{display:none}
.trim-fl #parentapp .tfc-grid{gap:0}

/* ---------- COMPANIES ---------- */
.trim-co section.hero + section.band{display:none}
.trim-co #booking .bk-filmstrip .bk-ph{display:none}
.trim-co #booking .bk-top-co > div:first-of-type p{display:none}
.trim-co #booking .sec-head.center{display:none}
.trim-co #booking .pwx-body .fcard:nth-child(n+5){display:none}
.trim-co #runday .sec-head p{display:none}
.trim-co #parentapp .pf-app{display:none}
.trim-co #parentapp .tfc-grid{gap:0}

/* ---------- FRANCHISES ---------- */
.trim-fr .hero .heroimg-pic{display:none}
.trim-fr section.hero + section.band{display:none}
.trim-fr #netsites .ns-film{display:none}
.trim-fr #dashboard .pf-card:not(.pf-grid .pf-card:last-child),
.trim-fr #dashboard .pf-grid .pf-card:first-child{display:none}
.trim-fr #dashboard .sec-head p{display:none}

/* ---------- SCHOOLS ---------- */
.trim-sc #schero .heroimg-pic{display:none}
.trim-sc #scwhy .sec-head p{display:none}
.trim-sc #scbook .bk-ticks,
.trim-sc #scbook .bk-copy p{display:none}
.trim-sc #scwhy .sc-item:nth-child(3){display:none}
.trim-sc #sctrust .sc-panel li:nth-child(n+4){display:none}
.trim-sc #scmoney .sec-head p,
.trim-sc #scsafe .sec-head p{display:none}
.trim-sc #scbook .bk-filmstrip{display:none}
.trim-sc #scday .sc-slot:nth-child(2),
.trim-sc #scday .sc-slot:nth-child(3){display:none}
.trim-sc #scday .sec-head p{display:none}
.trim-sc #scmoney .fgrid .fcard:nth-child(n+4){display:none}
.trim-sc #scsafe .fgrid .fcard:nth-child(n+5){display:none}
.trim-sc #scfaq .fq details:nth-child(2),
.trim-sc #scfaq .fq details:nth-child(5){display:none}
}

/* phones (<760px): the hero slider stays a slider, but the laptop mock-ups are NOT shrunk desktop layouts any more.
   They used 5-6px fonts under zoom:.49 and iOS Safari enforces a minimum font size, so text came out ~1.5x too big and overlapped.
   Each mock is re-laid-out here at real, legible sizes (>=10px): sidebar hidden, fewer rows/columns, frame sized to its content. */
@media (max-width:759.98px){
  html body .wrap .hero-slider .hs-art .ch-lap{width:100% !important;max-width:340px;margin:0 auto;zoom:1}
  html body .wrap .hero-slider .ch-lapscr{padding:5px 5px 6px}
  html body .wrap .hero-slider .ch-lapin{aspect-ratio:auto;position:static;overflow:hidden}
  html body .wrap .hero-slider .ch-lapin > .ma{position:static;display:block;height:auto}
  html body .wrap .hero-slider .ma-side{display:none}
  html body .wrap .hero-slider .ma-main{padding:8px;gap:7px}
  html body .wrap .hero-slider .ma-hero{padding:8px 10px;gap:8px}
  html body .wrap .hero-slider .ma-hero b{font-size:12px;line-height:1.2}
  html body .wrap .hero-slider .ma-hero span{font-size:10px;padding:3px 8px;white-space:nowrap}
  html body .wrap .hero-slider .ma-foot{font-size:10px;gap:8px;line-height:1.3}
  html body .wrap .hero-slider .ma-foot b{font-size:10px;text-align:right}
  html body .wrap .hero-slider .ma-rows{padding:2px 8px;flex:none;display:block;overflow:visible}
  html body .wrap .hero-slider .lst-rows{display:flex}

  /* listings: 3 rows, thumbnail + title + sub-line, count and pill on the right */
  html body .wrap .hero-slider .lst{flex:none;gap:8px;padding:8px 0}
  html body .wrap .hero-slider .lst:nth-child(n+4){display:none}
  html body .wrap .hero-slider .lst-th{width:36px;height:36px}
  html body .wrap .hero-slider .lst-t b{font-size:12px}
  html body .wrap .hero-slider .lst-t small{font-size:10px;line-height:1.3;margin-top:1px}
  html body .wrap .hero-slider .lst-r b{font-size:12px}
  html body .wrap .hero-slider .lst-pill{font-size:10px;padding:2px 8px;margin-top:3px}

  /* money: each ledger row becomes a two-line card (reference + amount / detail + status), first 5 shown */
  html body .wrap .hero-slider .ma-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:3px;align-items:center;padding:7px 0;font-size:10px;flex:none;min-height:0;height:auto}
  html body .wrap .hero-slider .ma-row:nth-child(n+6){display:none}
  html body .wrap .hero-slider .ma-row b{font-size:11px;grid-column:1;grid-row:1;overflow-wrap:normal}
  html body .wrap .hero-slider .ma-row span{font-size:12px;grid-column:2;grid-row:1;margin:0;text-align:right}
  html body .wrap .hero-slider .ma-row em{font-size:10px;grid-column:1;grid-row:2}
  html body .wrap .hero-slider .ma-row u{font-size:10px;grid-column:2;grid-row:2;margin:0;padding:2px 8px;white-space:nowrap;justify-self:end}

  /* rota: 3 days, first listing, two roles; times and names in plain text */
  html body .wrap .hero-slider .sch-tabs,
  html body .wrap .hero-slider .sch-key b,
  html body .wrap .hero-slider .sch-key span,
  html body .wrap .hero-slider .sch-listing small,
  html body .wrap .hero-slider .sch > :nth-last-child(-n+3){display:none}
  html body .wrap .hero-slider .sch-head,
  html body .wrap .hero-slider .sch-tot,
  html body .wrap .hero-slider .sch-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body .wrap .hero-slider .sch-head > :nth-child(n+4),
  html body .wrap .hero-slider .sch-tot > :nth-child(n+4),
  html body .wrap .hero-slider .sch-cells > :nth-child(n+4){display:none}
  html body .wrap .hero-slider .sch-head div{padding:5px 7px}
  html body .wrap .hero-slider .sch-head em{font-size:10px}
  html body .wrap .hero-slider .sch-head b{font-size:12px}
  html body .wrap .hero-slider .sch-listing{font-size:11px;gap:6px;padding:6px 8px}
  html body .wrap .hero-slider .sch-listing span{font-size:10px}
  html body .wrap .hero-slider .sch-role{font-size:11px;padding:5px 8px;gap:5px}
  html body .wrap .hero-slider .sch-role i{width:7px;height:7px}
  html body .wrap .hero-slider .sch-tot span{font-size:10px;padding:2px 7px}
  html body .wrap .hero-slider .sch-cells > div{padding:4px}
  html body .wrap .hero-slider .shf{padding:5px 6px}
  html body .wrap .hero-slider .shf b{font-size:10px;line-height:1.2}
  html body .wrap .hero-slider .shf u{font-size:11px;line-height:1.25;margin-top:2px}
  html body .wrap .hero-slider .shf i{font-size:10px;padding:1px 5px;margin-top:3px;line-height:1.3}
  html body .wrap .hero-slider .shf-add{font-size:14px;min-height:40px}
  html body .wrap .hero-slider .sch-key{font-size:10px}
  html body .wrap .hero-slider .sch-key em{font-size:11px;margin-left:0}

  /* phone-booking slide: the design box was 470px wide with the handset on its left and the photo spill (hidden <400px) on its right,
     so the handset sat off-centre. Narrow the design box to the handset (18px margin each side) and centre it. */
  html body .wrap .hero-slider .bh-scaler{--bh-design-w:220;width:min(100%,250px);margin:0 auto;flex:0 0 auto}
  html body .wrap .hero-slider .hs-art-pair{justify-content:center}
  html body .wrap .hero-slider .bh-media--breakout{display:none}
}