/* Calendar additions on the Rails site: the "no upcoming events" note and the past-events gallery */
.no-upcoming-events { padding: 2rem 0 5rem; }
.no-upcoming-events .h1-style { margin-bottom: 1.25rem; }

.past-events { padding-bottom: 4rem; }
.past-events-title { text-align: center; margin: 0 0 2.5rem; }
.item.events-item.past-event { margin-bottom: 3rem; }
.past-event img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 1rem; }
.past-event-title { margin-bottom: 0.25rem; }
.past-event .event-date { color: #FF00C8; font-weight: 600; font-size: 0.8125rem; }
/* Saved message on a card page: same line as "Back to Directory", right-aligned, white on the card colour */
.card-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.card-saved { margin: 0; color: #000; /* N56: white was ~3:1 on orange, coral and magenta; black clears 5:1 on all four card colours */ text-align: right; }

/* A plain line of news above the directory (e.g. "Your login isn't linked to a directory card yet.") */
.directory-notice { text-align: center; color: #FF00C8; margin: 0 auto; padding: 1.5rem 1rem 0; }

/* Filter lists: a closed list is out of the Tab order, not just out of sight */
.btn-filter-toggle + .btn-cluster { visibility: hidden; }
.btn-filter-toggle.open + .btn-cluster { visibility: visible; }

/* Gallery note, small desktops: the pink note sits in a gap one row high; with the full padding its text wrapped to five lines and ran into the next row */
@media (min-width: 64em) and (max-width: 80em) {
  .gallery-grid .callout-box { padding: 1.5rem 4.5rem 1.5rem 1.75rem; }
  .gallery-grid .callout-box:after { right: 1.25rem; }
}

/* Footer logo on very narrow phones: 326px fixed made every page scroll sideways at 320 */
.site-footer .site-title { max-width: 100%; }
/* A long unbroken name or place ("Chaloemtiarana") on a half-width card at 320 pushed the page sideways; it may now break */
.people-item .item-content-wrapper, .books-item .item-content-wrapper { overflow-wrap: anywhere; }

/* Calendar tabs on a phone: side by side each label wrapped to two lines beside its dot; one tab per line, each a 44px-high target */
@media (max-width: 47.9375em) {
  .faux-radio-filter, .faux-radio-filter:last-child { float: none; display: block; width: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

/* Phone tap targets (ruling R1-7): every link and button a thumb has to hit is at least 44px tall, by padding alone.
   Inline links: vertical padding never moves a line. Block links: padding with equal negative margin keeps every pixel where it was. */
@media (max-width: 47.9375em) {
  .site-footer .logout-link a, .exchange-tags a, .people-item .h2-style a,
  .books-item .h1-style a, .books-item .h2-style a, .people-content-box p a, .update-link a,
  .callout-box a, .item-content-wrapper .label-sm, .no-upcoming-events a { padding-block: 12px; }
  /* the footer links carry their own underline, which padding would move: an invisible extension of the link does the job */
  .site-footer .footer-navigation ul li a { position: relative; }
  .site-footer .footer-navigation ul li a::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -13px; }
  .primary-menu li a, #logout-primary a { padding-block: 9.5px; margin-block: -9.5px; }
  .back-link { padding-block: 12px; margin-block: -12px; }
  .menu-toggle, .menu-close, .menu-close:hover, .menu-toggle:hover { box-sizing: content-box; padding: 6.5px 0 6.5px 2px; background-origin: content-box; margin-top: -6.5px; }
}

/* K4: clickable things that aren't links still show the pointing hand */
.menu-toggle, .menu-close, .btn-filter-toggle, .btn-filter, .view-filter, .faux-radio-filter, button { cursor: pointer; }

/* L59: an uploaded event photo that is not square fills the circle (cropped) instead of squashing into an oval */
.item.events-item img { aspect-ratio: 1; object-fit: cover; }

/* L80: the "where" line reads as part of the description (regular, same size), not a second heading */
.item.events-item .venue { margin: 0 0 0.25rem; }

/* N04: alum and Support photos are always a centred square, so the circle is a circle whatever was uploaded */
.item.people-item img, .single-people .people-content-box img, .page-item .page-thumbnail img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* N09: a list in a centred zone keeps its bullet beside its text, not at the far left of the column */
.page-overview ul, .page-overview ol, .content-block-text ul, .content-block-text ol { list-style-position: inside; margin-left: 0; }
.page-overview li > p:first-child, .content-block-text li > p:first-child { display: inline; }

/* N11: the closed menu is off screen; its links must not be Tab stops until it opens (the delay lets the close animation finish) */
header .open-menu-containing-column { visibility: hidden; transition: width 0.3s ease-in-out, height 0.3s ease-in-out, visibility 0s linear 0.3s; }
header .open-menu-containing-column.open { visibility: visible; transition-delay: 0s; }
/* The pink opens first, then its contents fade in, so nothing reflows in view. Closing fades them out first, then folds the pink away. */
header .open-menu-containing-column { transition: width 0.3s ease-in-out 0.12s, height 0.3s ease-in-out 0.12s, visibility 0s linear 0.42s; }
header .open-menu-containing-column.open { transition: width 0.3s ease-in-out, height 0.3s ease-in-out, visibility 0s; }
header .open-menu-containing-column > .container-fluid { opacity: 0; transition: opacity 0.12s ease-out; }
header .open-menu-containing-column.open > .container-fluid { opacity: 1; transition: opacity 0.25s ease-in 0.3s; }
@media (prefers-reduced-motion: reduce) {
  header .open-menu-containing-column, header .open-menu-containing-column.open, header .open-menu-containing-column > .container-fluid { transition: none; }
}

/* N29: the rest of the phone tap targets (R1-7). An invisible extension of each control reaches 44px; nothing visible moves. */
@media (max-width: 47.9375em) {
  .btn-filter-toggle, .view-filter.order-by-icon, .site-footer .site-title a, .post-navigation .nav-links a { position: relative; }
  .btn-filter-toggle::after, .view-filter.order-by-icon::after, .site-footer .site-title a::after, .post-navigation .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
  .view-filter.order-by-icon::after { left: -3px; right: -3px; top: -3px; bottom: -3px; }
  .site-footer .site-title a::after { top: -14px; bottom: -14px; }
}

/* T04: a title with no spaces in it (a pasted address) breaks at the edge instead of widening the page and pushing the Edit pill off screen */
.events-item .item-content-wrapper, .events-item h2, .events-item h3, .past-event-title, .past-event .event-date { overflow-wrap: anywhere; min-width: 0; }
.events-item .col { min-width: 0; }

/* T22: "Back to Directory" stays on one line at 320; the arrow is placed against the left edge, so a wrapped second line ran under it. Tighter tracking and a shorter arrow below 360px. */
.label-sm.back-link { white-space: nowrap; }
@media (max-width: 22.5em) {
  .label-sm.back-link { letter-spacing: 2px; padding-left: 60px; }
  .label-sm.back-link:before { width: 44px; background-size: 44px auto; }
}

/* T49: the photo page Previous/Next sat inside a nav that clips overflow, so the invisible 44px extension (N29) never reached a thumb; the welcome video dot gets one too. Nothing visible moves. */
@media (max-width: 47.9375em) {
  .single-photos .post-navigation { overflow: visible; }
  .surprise-dot a.block-link { top: -12px; bottom: -12px; left: -12px; right: -12px; }
}

/* T64: a sentence ("Editing your own profile is switched off...") reads as a sentence: its own line under "Back to ...", left-aligned, plain case and tracking. The short "Profile updated" stays a tracked label on the right. */
.card-saved.card-saved--note { flex: 1 0 100%; text-align: left; text-transform: none; letter-spacing: 0.02em; font-size: 1.0625rem; line-height: 1.5; font-weight: 400; margin-top: 0.5rem; }

/* T71: on a page with the plain logo (a profile) at tablet width the wordmark is 640px wide and its last letters sat 8px under the menu icon; other pages leave about 50px. Drop it below the icon. */
@media (min-width: 48em) and (max-width: 63.9375em) {
  #closed-container .site-title { margin-top: 3.25rem; }
}

/* Sign-in sent: its own step under the big white heading, with a quiet way back to the form */
.page.page-login p.login-sent { margin: 1.5rem auto 0; max-width: 32rem; }
.page.page-login p.login-sent a { color: #fff; text-decoration: underline; }
.page.page-login p.login-change { text-align: center; margin: 3.75rem 0 0; }
/* iPhone Safari zooms into any field under 16px when tapped; the sign-in field is 15px in the original */
@media (max-width: 63.9375em) { #loginform input[type=email] { font-size: 16px; } }