/* Verity Vista Photographer Hub + booking site: fixes from the 27 Oct 2026 visual review.
   Loads after liquid-glass.css (and mobile-nav.css). Deleting this file and its <link> lines puts
   everything back. Booking rules are scoped to body.pub (the booking pages); the hub keeps its teal. */

/* ---------- Booking: same grounds and warm light as verityvista.org ----------
   The booking pages used a teal-tinted navy and a mint light mode. These are the main site's
   dark navy (#101D28) and cream (#F2ECDF), with the same warm orange light. */
[data-theme=dark] body.pub{--bg-a:#0d1821;--bg-b:#101D28;--orb1:#1b3346;--orb2:#ef972e;--orb3:#14283a;--orb4:#b8743a;--sweep:rgba(255,170,80,.12)}
[data-theme=light] body.pub{--bg-a:#F2ECDF;--bg-b:#FAF7F0;--orb1:#f6d6ae;--orb2:#f6b26b;--orb3:#efe3cf;--orb4:#ffd9ad;--sweep:rgba(255,228,190,.5)}
html[data-theme=dark]:has(body.pub){background:#0d1821}
html[data-theme=light]:has(body.pub){background:#F2ECDF}

/* ---------- Booking: a photo on each session card ----------
   The same photos the main site uses for each service, cropped 16:9 around the people so
   nothing important is cut. Cards keep their text below; a card for a new session type
   without a photo simply shows no image. */
body.pub .choices .choice{padding-top:0;overflow:hidden}
body.pub .choices .choice::before{
	content:"";display:block;margin:0 -22px 10px;aspect-ratio:16/9;
	background:var(--card) center/cover no-repeat;border-bottom:1px solid var(--line);
}
body.pub .choices .choice:not([href*="type=1&"]):not([href$="type=1"]):not([href*="type=2&"]):not([href$="type=2"]):not([href*="type=3&"]):not([href$="type=3"]):not([href*="type=4&"]):not([href$="type=4"]):not([href*="type=5&"]):not([href$="type=5"]):not([href*="type=6&"]):not([href$="type=6"]){padding-top:22px}
body.pub .choices .choice:not([href*="type=1&"]):not([href$="type=1"]):not([href*="type=2&"]):not([href$="type=2"]):not([href*="type=3&"]):not([href$="type=3"]):not([href*="type=4&"]):not([href$="type=4"]):not([href*="type=5&"]):not([href$="type=5"]):not([href*="type=6&"]):not([href$="type=6"])::before{display:none}
body.pub .choices .choice:is([href$="type=1"],[href*="type=1&"])::before{background-image:url("sessions/portraits.jpg")}
body.pub .choices .choice:is([href$="type=2"],[href*="type=2&"])::before{background-image:url("sessions/family.jpg")}
body.pub .choices .choice:is([href$="type=3"],[href*="type=3&"])::before{background-image:url("sessions/engagements.jpg")}
body.pub .choices .choice:is([href$="type=4"],[href*="type=4&"])::before{background-image:url("sessions/graduation.jpg")}
body.pub .choices .choice:is([href$="type=5"],[href*="type=5&"])::before{background-image:url("sessions/headshots.jpg")}
body.pub .choices .choice:is([href$="type=6"],[href*="type=6&"])::before{background-image:url("sessions/events.jpg")}
body.pub .choices .choice .from{margin-top:4px}
@media (max-width:560px){body.pub .choices .choice::before{aspect-ratio:2/1}}

/* ---------- Booking: the step bar stays on one line on phones ----------
   Done steps shrink to their tick, so the current step and what's left fit across. */
@media (max-width:560px){
	body.pub .bsteps{flex-wrap:nowrap;gap:5px}
	body.pub .bsteps li{flex:none;font-size:.82rem;padding-right:10px;white-space:nowrap}
	body.pub .bsteps li.done{font-size:0;gap:0;padding:4px}
	body.pub .bsteps li:not(.now):not(.done)+li:not(.now):not(.done){font-size:0;gap:0;padding:4px}
}

/* ---------- Booking: photographer step ---------- */
body.pub .main-pick+p.mut{margin:12px 0 18px!important}
body.pub .main-pick+p.mut+.alt-pick,body.pub .alt-pick{margin-top:8px}
body.pub .alt-pick>summary{
	list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
	padding:10px 16px;border-radius:999px;border:1px solid var(--glass-edge);background:var(--glass);
	-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--ink)
}
body.pub .alt-pick>summary::-webkit-details-marker{display:none}
body.pub .alt-pick>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
body.pub .alt-pick[open]>summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
body.pub .alt-pick>p.mut{margin:14px 0 10px}

/* ---------- Booking: calendar, open days stand out ----------
   Days you can't book are plain numbers; open days are the only boxes. */
body.pub .pick .day.shut{background:none;border-color:transparent;box-shadow:none;opacity:.32}
body.pub .pick .day.open:not(.sel){background:var(--glass-hi)}
[data-theme=light] body.pub .time{border-color:rgba(10,16,14,.22)}
@media (min-width:760px){body.pub .tpick{align-items:start}}

/* ---------- Hub directory: cards as tall as what's in them ----------
   Cards were stretched to the tallest one, so a short card was a big empty box. Now each is
   as tall as its own text, and a card with a bio is a little wider than one without. */
.grid:has(> .mc){display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.grid > .mc{flex:1 1 230px;max-width:340px}
.grid > .mc:has(> p.mut){flex:1.3 1 300px;max-width:420px}
@media (max-width:560px){.grid > .mc,.grid > .mc:has(> p.mut){max-width:none;flex-basis:100%}}

/* ---------- Hub member area ---------- */
/* Finished setup steps: ticked, not crossed out */
.todo li.done span{text-decoration:none}
/* The sidebar keeps to the screen and scrolls on its own when it's longer */
@media (min-width:901px){.side{max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}

/* ---------- Both: the dashed strip above the footer becomes a hairline ---------- */
.film{height:1px;background:var(--line);border:0;opacity:1}