/* ============================================================
   Mobile layer.

   Everything here is inside a max-width media query, so the desktop
   site is untouched by it: no rule in this file can apply above 760px.
   The desktop layout was designed first and is not compromised to
   accommodate the phone — the phone gets its own treatment instead.
   ============================================================ */

@media (max-width: 760px) {

  /* --- header becomes a bar with a drawer --- */
  .topbar .wrap{min-height:52px;gap:10px;flex-wrap:nowrap}
  .mainnav{display:none}
  .topacts .btn{display:none}
  .topacts{gap:6px;margin-left:auto}
  .brand{font-size:.95rem}
  .brand small{display:none}

  .mobmenu{display:block;order:3}
  .mobmenu > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
    font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--ink-2);
    border:1px solid var(--line-2);border-radius:3px;padding:8px 11px;min-height:38px}
  .mobmenu > summary::-webkit-details-marker{display:none}
  .mobmenu > summary .bars{width:15px;height:2px;background:currentColor;position:relative;display:block}
  .mobmenu > summary .bars::before,.mobmenu > summary .bars::after{content:"";position:absolute;left:0;width:15px;height:2px;background:currentColor}
  .mobmenu > summary .bars::before{top:-5px}
  .mobmenu > summary .bars::after{top:5px}
  .mobmenu[open] > summary{background:var(--chev);border-color:var(--chev);color:var(--on-chev)}
  .mobpanel{position:absolute;left:0;right:0;top:100%;background:var(--surface);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px -18px rgba(0,0,0,.45);padding:8px 16px 14px;z-index:60}
  .topbar .wrap{position:relative}
  .mobpanel nav{display:grid}
  .mobpanel nav a{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);
    text-decoration:none;padding:13px 4px;border-bottom:1px solid var(--line)}
  .mobpanel nav a.on{color:var(--chev-ink)}
  .mobfoot{display:flex;flex-wrap:wrap;gap:8px;padding-top:13px}
  .mobfoot .btn{flex:1;min-width:130px;min-height:42px}

  /* --- typography and rhythm tuned for a phone --- */
  .wrap{padding-inline:16px}
  h1{font-size:1.9rem;line-height:1.08}
  h2{font-size:1.32rem}
  .lede{font-size:1rem}
  .phead{padding-block:20px 16px;margin-bottom:20px}
  .band{padding-block:30px}
  section.band + section.band{border-top:1px solid var(--line)}
  .bandhead{gap:10px;margin-bottom:14px}

  /* --- hero stacks, image first so the page opens on a picture --- */
  .hero .wrap{grid-template-columns:1fr;gap:18px;padding-block:20px 26px}
  .hero .wrap > div:last-child{order:-1}
  .hero h1,.hero .lede{max-width:none}
  .hero .row .btn{flex:1;min-width:150px}

  /* --- one column for the paired layouts --- */
  .g2,.g3,.grid[id]{grid-template-columns:1fr!important}
  .g4{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr;gap:7px}
  .visit{grid-template-columns:1fr;gap:20px}
  .costs{margin:18px 0 0;border-left:0;border-top:1px solid var(--line);border-radius:0 0 5px 5px}

  /* --- touch targets --- */
  .btn{min-height:44px;padding:11px 16px}
  .btn.sm{min-height:38px}
  .chip{min-height:38px;display:inline-flex;align-items:center}
  .nextstrip a{flex:1;min-width:140px;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center}
  .side{grid-template-columns:1fr 1fr}
  .side a{min-height:40px}

  /* --- tables scroll rather than squash --- */
  .tbl{font-size:.78rem}
  .kv{grid-template-columns:76px 1fr}

  /* --- the card fills the screen, because that is what gets scanned --- */
  .cardpage{padding:10px 14px 34px;max-width:none}
  .mcard{border-radius:16px;padding:20px}
  .mcard-name h1{font-size:1.6rem}
  .mcard-qr{width:min(230px,66%)}
  .cardacts .btn{min-height:46px}

  /* --- footer --- */
  footer.site .wrap{flex-direction:column;gap:14px}
}

/* Very narrow phones: let the two-up grids fall to one column. */
@media (max-width: 430px) {
  .g4,.gal{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .mcard-grid{grid-template-columns:1fr 1fr}
  .side{grid-template-columns:1fr}
}

@media (max-width: 760px) {
  .cartrow{grid-template-columns:56px 1fr;gap:10px;row-gap:8px}
  .cartrow > form,.cartrow > div:last-of-type{grid-column:2}
  .libitem{grid-template-columns:34px 1fr;gap:11px}
  .libitem .libact{grid-column:2;justify-items:start;flex-direction:row}
  .libkind{width:34px;height:34px;font-size:.95rem}
  .libbar{flex-direction:column;align-items:stretch}
  .linkrow2{grid-template-columns:1fr;gap:6px}
  .visiting{display:none}
}

@media (max-width: 760px) {
  .cal > div{min-height:44px;padding:4px 5px;gap:3px}
  .cal .dow{padding:5px 4px;font-size:.5rem;letter-spacing:.06em}
  .cal .dn{font-size:.62rem}
}

/* ---------- membership card: garage list on a phone ---------- */
@media (max-width: 430px) {
  .cargarage .carrow{grid-template-columns:70px minmax(0,1fr);gap:10px}
  .cargarage .carpick{grid-column:2;justify-self:start}
  .mcard-car{margin:10px -8px 4px}
}

/* ---------- door check-in on a phone: tighter numbers and rows, search sticks under the bar ---------- */
@media (max-width: 430px) {
  .dcounts .n{font-size:1.3rem}
  .dtitle{font-size:1.2rem}
  .dhead .btn{flex:none}
  .dsearch{top:52px}
  .dform{padding:10px}
}

/* ---------- events calendar on a narrow phone: pills shrink to tappable bars, names in the list beside ---------- */
@media (max-width: 430px) {
  .cal .ev{font-size:0;padding:0;height:8px;border-left-width:0;background:var(--chev)}
  .cal .ev.pet{background:var(--petrol)}
}

/* ---------- run mode on a phone: big targets, map first ---------- */
@media (max-width: 760px) {
  .runbtns .btn{min-height:58px;font-size:1rem}
  .runstat b{font-size:.95rem}
  .runbar{padding:10px 12px}
  .runbar .row{width:100%}
  .runmap{height:48vh;min-height:300px}
  .runitem{padding:12px}
  .runitem .rcall{min-height:40px}
  /* the organiser is in the lead car: map first, the console menu stays in the header */
  .shell:has(.runmapgrid) > .side{display:none}
}
@media (max-width: 760px) {
  .calcard .cal > div{min-height:54px}
  .calcard .cal > .dow{min-height:0}
}
@media (max-width: 430px) {
  .calcard .cal > div{min-height:44px}
}

/* ---------- vehicle photo editor on a phone: two tiles a row, 44px buttons, list actions under the car ---------- */
@media (max-width: 760px) {
  .cpe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cpe-b{width:40px;height:40px}
  .cpe-b svg{width:20px;height:20px}
  .cpe-cap{min-height:44px;font-size:16px}
}
@media (max-width: 520px) {
  .vrow{grid-template-columns:70px minmax(0,1fr)}
  .vrow>.ph{width:70px}
  .vrow .vact{grid-column:2;display:flex;gap:8px}
  .vrow .vact .btn{width:auto}
}
@media (max-width: 430px) {
  .cpe-b{width:44px;height:44px}
  .cpe-tl{top:0;left:0}.cpe-tr{top:0;right:0;gap:0}
  /* a 44px target drawn as a 32px circle, so three of them leave the photo visible */
  .cpe-tl .cpe-b,.cpe-tr .cpe-b{background:radial-gradient(circle,rgba(255,255,255,.92) 15.5px,rgba(0,0,0,.18) 16px,transparent 17px);box-shadow:none}
  .cpe-tl .cpe-b svg,.cpe-tr .cpe-b svg{width:17px;height:17px}
  /* arrows get their own full-width row under the photo instead of covering it */
  .cpe-bl{position:static;display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:1}
  .cpe-bl .cpe-b{width:100%;border-radius:4px;background:var(--surface);border:1px solid var(--line-2);box-shadow:none;color:var(--ink-2)}
}

/* ---------- gallery bulk upload on a phone ---------- */
@media (max-width: 430px) {
  .gup-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .gup-acts .btn{flex:1}
}
@media (max-width: 760px) {
  .gup-top{top:52px}
}

/* ---------- committee guide on a phone ---------- */
@media (max-width: 560px) {
  .gsteps{grid-template-columns:1fr 1fr}
  .gcard2{grid-template-columns:1fr}
}

/* ---------- paying on a phone ---------- */
@media (max-width: 430px) {
  .paytab span{font-size:.72rem;min-height:44px}
  .awform{min-width:150px}
}

/* ---------- run-mode map page: the console menu (now wrapped in .sidebox) stays out of the way ---------- */
@media (max-width: 760px) {
  .shell:has(.runmapgrid) > .sidebox{display:none}
}

/* ---------- events: map and documents on a phone ---------- */
@media (max-width: 760px) {
  .evmap{aspect-ratio:4/3}
  .evdoc-replace{margin-left:0}
  .evdoc-main .btn.sm{min-height:40px}
}

/* ---------- books receipts and claims on a phone: claim rows and the lodge form stack ---------- */
@media (max-width: 760px) {
  .claimdecide,.claimgrid{grid-template-columns:1fr!important}
  .attgrid{grid-template-columns:1fr 1fr}
}

/* ---------- email templates on a phone ---------- */
@media (max-width: 760px) {
  .imgrow{grid-template-columns:84px minmax(0,1fr)}
  .imgthumb{width:84px;height:64px}
  .previewwrap iframe{height:70vh;min-height:420px}
  .tplthumb{height:200px}
  .tplthumb iframe{transform:scale(.38)}
  #designgrid{grid-template-columns:1fr!important}
}