.portal-columns { grid-template-columns:var(--slot-1,minmax(300px,1fr)) var(--slot-2,minmax(300px,1fr)) var(--slot-3,minmax(300px,1fr)); }
.portal-columns:has(> .generators:nth-child(1)) { --slot-1:357px; }
.portal-columns:has(> .generators:nth-child(2)) { --slot-2:357px; }
.portal-columns:has(> .generators:nth-child(3)) { --slot-3:357px; }
.portal-columns:has(> .personal-calendar:nth-child(1)) { --slot-1:minmax(360px,520px); }
.portal-columns:has(> .personal-calendar:nth-child(2)) { --slot-2:minmax(360px,520px); }
.portal-columns:has(> .personal-calendar:nth-child(3)) { --slot-3:minmax(360px,520px); }
.portal-columns > * { grid-column:auto; border:0; border-right:1px solid #dce3eb; min-width:0; }
.portal-columns > :last-child { border-right:0; }
.daily-matches { padding:36px 20px 48px; }
.daily-matches h1 { margin-bottom:6px; }
#matches-list h2 { font-size:14px; margin:24px 0 8px; }
#matches-list ul { padding:0; margin:0; list-style:none; }
#matches-list li { display:grid; grid-template-columns:45px minmax(0,1fr); gap:12px; padding:9px 0; border-bottom:1px solid #dce3eb; font-size:13px; line-height:1.5; }
#matches-list li > span { color:#1260ae; }
#matches-list a,#matches-list a:hover,#matches-list a:focus { text-decoration:none; color:#213349; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.matches-empty,#matches-status { font-size:13px; color:#66768a; }
@media(max-width:1250px) { .portal-columns { grid-template-columns:repeat(2,minmax(0,1fr)); } .portal-columns > :nth-child(2) { border-right:0; } .portal-columns > :nth-child(3) { grid-column:1 / -1; border-top:1px solid #dce3eb; } }
@media(max-width:820px) { .portal-columns { grid-template-columns:minmax(0,1fr); } .portal-columns > * { border-right:0; border-top:1px solid #dce3eb; } .portal-columns > :first-child { border-top:0; } .portal-columns > .portal-slot-empty { display:none; } .daily-matches { padding:24px 0; } }
/* Shared vertical rhythm for the two appointment lists. */
.personal-calendar h1,.daily-matches h1 { margin-bottom:20px; }
#calendar-status:empty,#matches-status:empty { display:none; }
#calendar-events,#matches-list,#matches-list ul { margin:0; padding:0; }
#calendar-events li,#matches-list li { padding:10px 0; font-size:13px; line-height:1.5; border-bottom:1px solid #dce3eb; }

#matches-list .event-name { color:#213349; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Compact module headings and event source filters. */
.portal-columns > section { padding-top:18px; }
.daily-matches h1 { margin-bottom:8px; }
#event-filters { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; margin:0 0 8px; }
#event-filters label { display:inline-flex; align-items:center; gap:4px; margin:0; font-size:13px; font-weight:400; line-height:20px; cursor:pointer; white-space:nowrap; }
#event-filters input { appearance:auto; width:15px; height:15px; margin:0; padding:0; accent-color:#1260ae; cursor:pointer; }


#event-time-filters { display:flex; flex-wrap:nowrap; align-items:center; gap:16px; margin:0 0 8px; }
#event-time-filters label { display:inline-flex; align-items:center; gap:4px; font-size:13px; line-height:20px; white-space:nowrap; cursor:pointer; }
#event-time-filters input { width:15px; height:15px; margin:0; accent-color:#1260ae; cursor:pointer; }

.calendar-setup p { max-width:420px; color:#66768a; font-size:14px; line-height:1.7; margin:0 0 20px; }
.calendar-setup-link,.calendar-guide-link { display:block; width:fit-content; color:#1260ae; font-size:13px; font-weight:600; text-decoration:none; margin:0 0 16px; }
.calendar-setup-link { border:1px solid #c5d2e1; border-radius:7px; padding:10px 14px; background:white; }

/* Gallery cards adapt to their module, without changing the portal columns. */
.latest-galleries { container-type:inline-size; }
#gallery-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0 0; padding:0; }
#gallery-list li { display:block; min-width:0; padding:0; border:0; }
#gallery-list .gallery-card { display:block; position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; border-radius:10px; background:linear-gradient(135deg,#315875,#182b3d); color:white; white-space:normal; box-shadow:0 2px 8px #21334916; text-decoration:none; }
#gallery-list .gallery-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
#gallery-list .gallery-card:hover img { transform:scale(1.04); }
#gallery-list .gallery-caption { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:12px; background:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.88) 100%); }
#gallery-list .gallery-date { color:#f1f5f9; font-size:11px; font-weight:400; }
#gallery-list .gallery-title { color:#fff; font-size:13px; line-height:1.3; font-weight:700; overflow-wrap:anywhere; text-shadow:0 1px 3px #0008; }
#gallery-list .gallery-card:focus-visible { outline:3px solid #1260ae; outline-offset:3px; }

@container (max-width:330px) { #gallery-list { gap:8px; } #gallery-list .gallery-caption { padding:8px; gap:2px; } #gallery-list .gallery-title { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { #gallery-list .gallery-card img { transition:none; } }

.gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.gallery-heading h1 { margin:0; }
.gallery-view-controls { display:flex; flex:none; gap:4px; }
.gallery-view-controls button { display:grid; place-items:center; width:32px; height:32px; padding:6px; border:1px solid #dce3eb; border-radius:6px; background:#fff; color:#66768a; cursor:pointer; }
.gallery-view-controls button[aria-pressed=true] { color:#1260ae; background:#edf5fc; border-color:#8ab7e2; }
.gallery-view-controls svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
#galleries-status:empty { display:none; }
#gallery-list[data-view=list] { display:block; margin-top:0; }
#gallery-list[data-view=list] li { border-bottom:1px solid #dce3eb; }
#gallery-list[data-view=list] .gallery-card { aspect-ratio:auto; padding:10px 0; overflow:visible; border-radius:0; background:none; box-shadow:none; }
#gallery-list[data-view=list] img { display:none; }
#gallery-list[data-view=list] .gallery-caption { position:static; display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:12px; padding:0; background:none; }
#gallery-list[data-view=list] .gallery-date { color:#66768a; font-size:13px; }
#gallery-list[data-view=list] .gallery-title { color:#1260ae; font-size:13px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:none; }

@container (max-width:500px) { #gallery-list { gap:8px; } #gallery-list .gallery-card { aspect-ratio:1; } #gallery-list .gallery-caption { padding:7px; gap:3px; } #gallery-list .gallery-date { font-size:10px; } #gallery-list .gallery-title { font-size:11px; } }

#gallery-list li[hidden] { display:none; }
