/* Tanglaw Core blocks. Colours come from the theme presets, with fallbacks so the blocks stay
   readable under another theme. */

/* Announcements: notices led by a date stamp (the day large, the month under it), then the audience
   tabs, the title and the summary. On wide screens the noticeboard on Home and the group pages runs in
   two columns. */
.tr-notices__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0 3rem; grid-template-columns: minmax(0, 1fr); }
.tr-notice { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 1.1rem; align-items: start; padding: 1.25rem 0; border-top: 1px solid var(--wp--preset--color--line, #ddd8ca); }
.is-board .tr-notices__list { border-bottom: 1px solid var(--wp--preset--color--line, #ddd8ca); }
@media (min-width: 900px) { .is-board .tr-notices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; } .is-board .tr-notice { border-bottom: 0; } }
.tr-stamp { display: grid; justify-items: center; align-content: start; padding: .45rem .25rem .5rem; border: 2px solid var(--wp--preset--color--green, #1f5135); border-top-width: 8px; border-radius: 4px; background: var(--wp--preset--color--white, #fff); color: var(--wp--preset--color--green, #1f5135); line-height: 1; text-align: center; }
.tr-stamp__day { font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 2rem; font-weight: 700; }
.tr-stamp__month { margin-top: .3rem; font-size: .75rem; font-weight: 700; color: var(--wp--preset--color--ink, #17201a); white-space: nowrap; }
.tr-notice__body { display: grid; gap: .35rem; }
.tr-notice__title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.tr-notice__title a { color: var(--wp--preset--color--green, #1f5135); text-decoration: none; }
.tr-notice__title a::after { content: ""; position: absolute; inset: 0; }
.tr-notice:hover .tr-notice__title a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold, #e0a526); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.tr-notice:focus-within { outline: 3px solid var(--wp--preset--color--green, #1f5135); outline-offset: 4px; border-radius: 4px; }
.tr-notice__title a:focus-visible { outline: none; }
.tr-notice__summary { margin: 0; max-width: 64ch; }
.tr-notices__none { margin: 0; padding: 1rem 1.25rem; border-left: 5px solid var(--wp--preset--color--gold, #e0a526); background: var(--wp--preset--color--white, #fff); }
.tr-notices__more { margin: 1rem 0 0; font-weight: 700; }
.tr-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tr-tag { display: inline-block; padding: .1rem .6rem; border-radius: 3px 3px 3px 0; font-size: .8125rem; font-weight: 700; line-height: 1.5; color: var(--wp--preset--color--ink, #17201a); background: var(--wp--preset--color--mist, #e3ece6); }
.tr-tag--students { background: #fbe9bf; }
.tr-tag--staff { background: #dde5f3; }
.tr-tag--parents { background: #f3dfe0; }
/* The same notice layout in the announcements list (a query loop of separate blocks). */
.tr-notice-loop .wp-block-post { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .35rem 1.1rem; align-content: start; padding: 1.25rem 0; border-top: 1px solid var(--wp--preset--color--line, #ddd8ca); }
.tr-notice-loop .wp-block-post > * { grid-column: 2; margin: 0; }
.tr-notice-loop .wp-block-post > .tr-notice-meta.is-stamp { grid-column: 1; grid-row: 1 / span 3; }
.tr-notice-loop .wp-block-post-title a { color: var(--wp--preset--color--green, #1f5135); text-decoration: none; }
.tr-notice-loop .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold, #e0a526); text-decoration-thickness: 3px; }
.tr-notice-loop .wp-block-post-excerpt__excerpt { margin: 0; max-width: 64ch; }
.tr-notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.tr-notice-meta.is-both .tr-stamp { min-width: 4.5rem; }

/* Audience doors: three tall panels (green, gold, ink); each opens its page and says how many
   notices that group had this month. */
.tr-doors { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .tr-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-door { min-height: 15rem; } }
.tr-door { position: relative; display: flex; flex-direction: column; min-height: 10rem; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--tr-radius, 6px); background: var(--wp--preset--color--green, #1f5135); color: #fff; }
.tr-door--parents { background: var(--wp--preset--color--gold, #e0a526); color: var(--wp--preset--color--ink, #17201a); }
.tr-door--staff { background: var(--wp--preset--color--ink, #17201a); }
.tr-door__title { margin: 0; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1.05; color: inherit !important; }
.tr-door__title a { color: inherit !important; text-decoration: none; }
.tr-door__title a::after { content: ""; position: absolute; inset: 0; }
.tr-door:hover .tr-door__title a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; }
.tr-door:focus-within { outline: 3px solid var(--wp--preset--color--gold, #e0a526); outline-offset: 4px; }
.tr-door--parents:focus-within { outline-color: var(--wp--preset--color--green, #1f5135); }
.tr-door__title a:focus-visible { outline: none; }
.tr-door__line { margin: .6rem 0 0; font-size: 1.0625rem; opacity: .92; }
.tr-door__count { margin: auto 0 0; padding-top: 1.5rem; font-weight: 700; }
.tr-door__count.has-news::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .5rem; border-radius: 50%; background: var(--wp--preset--color--gold-light, #f3d58a); vertical-align: .05em; }
.tr-door--parents .tr-door__count.has-news::before { background: var(--wp--preset--color--green, #1f5135); }

/* "On this page": the page's main headings as links. */
.tr-toc { padding: 1.25rem 1.25rem 1rem; border-left: 4px solid var(--wp--preset--color--gold, #e0a526); background: var(--wp--preset--color--white, #fff); }
.tr-toc__title { margin: 0 0 .5rem; font-weight: 700; color: var(--wp--preset--color--green, #1f5135); }
.tr-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.tr-toc__list li { margin: 0; }
.tr-toc__list a { display: block; padding: .35rem 0; color: var(--wp--preset--color--ink, #17201a); text-decoration: none; }
.tr-toc__list a:hover { color: var(--wp--preset--color--green, #1f5135); text-decoration: underline; }

/* Albums: covers in a grid; the whole card opens the album. */
.tr-albums { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.tr-album { position: relative; display: flex; flex-direction: column; }
.tr-album__cover { order: -1; margin: 0 0 .75rem; border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--mist, #e3ece6); }
.tr-album__cover img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform .3s ease; }
.tr-album:hover .tr-album__cover img { transform: scale(1.03); }
.tr-album__title { margin: 0; font-size: 1.25rem; }
.tr-album__title a { color: inherit; text-decoration: none; }
.tr-album__title a::after { content: ""; position: absolute; inset: 0; }
.tr-album:hover .tr-album__title a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold, #e0a526); text-decoration-thickness: 3px; }
.tr-album:focus-within { outline: 3px solid var(--wp--preset--color--green, #1f5135); outline-offset: 4px; border-radius: 8px; }
.tr-album__title a:focus-visible { outline: none; }
.tr-album__count { margin: .2rem 0 0; font-size: .9375rem; color: var(--wp--preset--color--muted, #4f5a52); }
@media (prefers-reduced-motion: reduce) { .tr-album__cover img { transition: none; } }
/* Mosaic: the first album large, the next two stacked beside it. */
@media (min-width: 800px) {
	.tr-albums.is-mosaic { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto; }
	.tr-albums.is-mosaic .tr-album:first-child { grid-row: span 2; }
	.tr-albums.is-mosaic .tr-album:first-child .tr-album__cover { flex: 1; min-height: 0; }
	.tr-albums.is-mosaic .tr-album:first-child .tr-album__cover img { height: 100%; aspect-ratio: auto; }
	.tr-albums.is-mosaic .tr-album:not(:first-child) .tr-album__cover img { aspect-ratio: 16 / 9; }
	.tr-albums.is-mosaic .tr-album:first-child .tr-album__title { font-size: 1.6rem; }
}

/* Contact details and the map. */
.tr-contact__list { margin: 0; }
.tr-contact__list div { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .25rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--wp--preset--color--line, #ddd8ca); }
.tr-contact__list dt { font-weight: 700; }
.tr-contact__list dd { margin: 0; overflow-wrap: anywhere; }
.tr-map { margin: 1.5rem 0 0; }
.tr-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 8px; background: var(--wp--preset--color--mist, #e3ece6); }
.tr-map figcaption { margin-top: .5rem; font-size: .9375rem; }
.tr-contact__note { margin: 1.5rem 0 0; padding: .9rem 1rem; border: 2px dashed var(--wp--preset--color--gold, #e0a526); border-radius: 8px; font-size: .9375rem; }

.tr-editor-empty { padding: 1rem; border: 1px dashed #8a8f96; border-radius: 6px; color: #4f5a52; }

/* Latest Notice: one line under the Home welcome, on the dark ribbon. */
.tr-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; color: #fff; }
.tr-ribbon__label { font-size: .875rem; font-weight: 700; color: var(--wp--preset--color--gold-light, #f3d58a); }
.tr-ribbon .tr-stamp { display: inline-flex; gap: .4rem; align-items: baseline; padding: .15rem .55rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 3px; background: transparent; color: #fff; }
.tr-ribbon .tr-stamp__day { font-size: 1.125rem; }
.tr-ribbon .tr-stamp__month { margin: 0; color: #e3ece6; }
.tr-ribbon__link { flex: 1 1 18rem; color: #fff !important; font-weight: 700; text-decoration: none; }
.tr-ribbon__link:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold, #e0a526); text-decoration-thickness: 2px; }

/* Breadcrumb. */
.tr-crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--wp--preset--color--muted, #4f5a52); }
.tr-crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--wp--preset--color--gold, #e0a526); }
.tr-crumbs a { color: inherit; text-decoration: none; }
.tr-crumbs a:hover { text-decoration: underline; }

/* Dates in stamps use old-style serif figures. */
.tr-stamp__day { font-variant-numeric: oldstyle-nums proportional-nums; font-variation-settings: "opsz" 40; }

/* Featured noticeboard: the newest notice large on the left, the next three compact on the right. */
.tr-notices__featured { display: grid; gap: 2rem 3.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .tr-notices__featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.tr-feature { position: relative; display: grid; gap: .9rem; justify-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); border-top: 3px solid var(--wp--preset--color--gold, #e0a526); background: var(--wp--preset--color--white, #fff); box-shadow: 0 1px 0 var(--wp--preset--color--line, #ddd8ca); }
.tr-feature .tr-stamp { padding: .55rem .9rem .6rem; }
.tr-feature .tr-stamp__day { font-size: 2.5rem; }
.tr-feature__title { margin: 0; font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); line-height: 1.12; font-weight: 600; letter-spacing: -.015em; }
.tr-feature__title a { color: var(--wp--preset--color--green, #1f5135); text-decoration: none; }
.tr-feature__title a::after { content: ""; position: absolute; inset: 0; }
.tr-feature:hover .tr-feature__title a { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold, #e0a526); text-decoration-thickness: 3px; text-underline-offset: .15em; }
.tr-feature:focus-within { outline: 3px solid var(--wp--preset--color--green, #1f5135); outline-offset: 4px; }
.tr-feature__title a:focus-visible { outline: none; }
.tr-feature__summary { margin: 0; max-width: 54ch; font-size: 1.125rem; }
.tr-feature__more { margin: .25rem 0 0; font-weight: 700; color: var(--wp--preset--color--green, #1f5135); }
.tr-feature__more a { color: inherit; }
.tr-notices__list.is-compact .tr-notice { grid-template-columns: 3.75rem minmax(0, 1fr); padding: 1rem 0; }
.tr-notices__list.is-compact .tr-notice:first-child { border-top: 0; padding-top: 0; }
.tr-notices__list.is-compact .tr-stamp__day { font-size: 1.6rem; }
.tr-notices__list.is-compact .tr-notice__summary { display: none; }
.tr-notices__list.is-compact .tr-notice__title { font-size: 1.125rem; }

/* Doors over a photo: the photo under the door's own tint. */
.tr-door.has-photo { overflow: hidden; isolation: isolate; }
.tr-door.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tr-door-photo) center / cover no-repeat; filter: grayscale(.3); }
.tr-door.has-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31, 81, 53, .82), rgba(22, 59, 39, .96)); }
.tr-door--parents.has-photo::after { background: linear-gradient(180deg, rgba(224, 165, 38, .86), rgba(224, 165, 38, .97)); }
.tr-door--staff.has-photo::after { background: linear-gradient(180deg, rgba(23, 32, 26, .8), rgba(23, 32, 26, .96)); }
@media (min-width: 760px) { .tr-door { min-height: 19rem; } }

/* Albums as a strip across the page: covers side by side, scrolling sideways on narrow screens. */
.tr-albums.is-strip { grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.tr-albums.is-strip .tr-album { scroll-snap-align: start; }
.tr-albums.is-strip .tr-album__cover img { aspect-ratio: 3 / 2; }

/* Audience filter: plain links as tabs, the current one underlined in gold. */
.tr-filter { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--wp--preset--color--line, #ddd8ca); }
.tr-filter a { padding: .35rem 0; font-weight: 700; color: var(--wp--preset--color--muted, #4f5a52); text-decoration: none; border-bottom: 3px solid transparent; }
.tr-filter a:hover { color: var(--wp--preset--color--green, #1f5135); }
.tr-filter a[aria-current="page"] { color: var(--wp--preset--color--green, #1f5135); border-bottom-color: var(--wp--preset--color--gold, #e0a526); }