/*
Theme Name: Chris Ulery
Template: twentytwentyfive
Description: Personal site theme for Chris Ulery. Child of Twenty Twenty-Five; design tokens live in theme.json.
Version: 1.3.1
Text Domain: chrisulery
*/

/* =============================================================================
   HOW THIS SITE IS STYLED (read this first)
   -----------------------------------------------------------------------------
   There are three layers. Always try them in this order:

   1. SITE-WIDE SETTINGS (no code): colors, fonts, text sizes, default button look.
      Stored in theme.json. Change them in wp-admin: Appearance > Editor > Styles.

   2. BLOCK SETTINGS (no code): section background colors, spacing, the book
      card's color and rounded corners, gallery columns, "Crop images to fit".
      Click the block in the page editor and use the right-hand Settings panel.

   3. THIS FILE (custom CSS): only for things the block settings can't do.
      Each section below explains what it controls and where it shows up.

   CONNECTING CSS TO A BLOCK: many rules below target a class name starting with
   "cu-" (e.g. cu-hero). That class is set on the block in the editor under
   Settings > Advanced > "Additional CSS class(es)". If you remove the class
   from a block, that block stops getting the styling described here.

   BUTTON SHAPE: all buttons are pills (fully rounded ends). The main
   Button blocks get this from the site-wide setting (Appearance > Editor >
   Styles > Blocks > Button > Border radius). The few buttons styled in this
   file (form buttons, speaking-dates MORE INFO, YouTube gallery page
   buttons) use "border-radius: 999px" to match. 999px just means "as round
   as possible". Form input boxes use a softer 10px so they sit well beside
   the pills.

   COLORS: rules use the site color names instead of hex codes, e.g.
   var(--wp--preset--color--accent-1). Names used here:
     base      = White  #FFFFFF        contrast  = Navy       #11222D
     accent-1  = Gold   #F5D26F        accent-2  = Deep navy  #0A161E
     accent-3  = Slate  #52616B        accent-4  = Mist       #F2F4F6
     accent-5  = Line   #D8DEE3        accent-6  = Pale navy  #B9C4CC
     accent-7  = Deep gold #85651C  (gold for TEXT on light backgrounds; the
                 bright Gold is only readable on navy)
   Change a color in Appearance > Editor > Styles > Colors and every rule
   here follows automatically.

   TABLE OF CONTENTS
     1. Header and menu
     2. Small uppercase labels
     3. Page heroes (big photo + text at the top of pages)
     4. Photo galleries: uniform cropping
     5. Photo galleries: full-size view when clicked (lightbox)
     6. Homepage: book card overlapping the hero
     7. Homepage: speaking dates table
     8. Book cover placeholder
     9. Expandable lists (Music page "Highlights")
    10. YouTube videos (single videos)
    11. Sermon cards (Speaking page)
    12. Forms (Contact page booking form + book "Notify me" form)
    13. YouTube playlist galleries (EmbedPlus plugin)
    14. Phones and small tablets (everything under 782px wide)
    15. Homepage: bio photo and social icons
    16. Homepage: "Free course" section (Is God Mean? episodes)
    17. Homepage: YouTube section (subscribe buttons + featured video)
    18. Blog: topic tiles, post cards, category pages, single posts
    19. Homepage: Speaking section (collage + featured sermon)
    20. Homepage: Recommendations slider
    21. Homepage: Blog section (newest post + next 3)
    22. Homepage: "Word + worship" FFH section (photo + credits card)
    23. Inner pages: heroes, rounded videos and photos, spacing, cards
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. HEADER AND MENU
   Where: the navy bar at the top of every page (template part "Header").
   Class: cu-header (on the header's outer Group block).
   What: removes the underline from the site name and menu links, and turns a
   menu link gold on hover and for the page you're currently on.
   ----------------------------------------------------------------------------- */
.cu-header .wp-block-site-title a { text-decoration: none; }
.cu-header .wp-block-navigation a { text-decoration: none; }
.cu-header .wp-block-navigation a:hover,
.cu-header .wp-block-navigation a:focus,
.cu-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--accent-1); }


/* 1b. No white gap above the footer. WordPress adds a default space between
   the page content and the footer; with colored sections it shows as a thin
   white strip, so it is removed here. */
.wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0; }


/* -----------------------------------------------------------------------------
   2. SMALL UPPERCASE LABELS
   Where: short lines above a headline, e.g. "EVANGELIST, AUTHOR, AND MUSICIAN"
   on the homepage and "COMING SPRING 2027" on the book card.
   Class: cu-label (on the Paragraph block).
   Safe to change: letter-spacing (.14em) for tighter or wider spacing.
   ----------------------------------------------------------------------------- */
.cu-label { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }


/* -----------------------------------------------------------------------------
   3. PAGE HEROES
   Where: the half-photo / half-text top section on Home, About, and Outreach.
   Class: cu-hero (on the Media & Text block).
   What: sets how tall the hero is and the padding around its text.
   Safe to change: 780px = the maximum hero height on desktop;
   86vh = at most 86% of the screen height.
   ----------------------------------------------------------------------------- */
.cu-hero.wp-block-media-text { min-height: min(86vh, 780px); }
.cu-hero .wp-block-media-text__content { padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); }

/* 3b. FULL-WIDTH PHOTO HERO WITH GRADIENT
   Where: the homepage hero (photo across the whole width, navy fading in
   from the left so the text is readable).
   Class: cu-hero-cover (on the Cover block).
   The gradient itself is a block setting: click the Cover block > Styles >
   Overlay. Phones use a bottom-to-top gradient instead (section 14).
   Safe to change: 780px / 86vh = the hero's height, same as 3 above. */
.cu-hero-cover.wp-block-cover { min-height: min(86vh, 780px) !important; }
.cu-hero-cover:has(+ .cu-book-band) { padding-bottom: clamp(7rem, 12vw, 10rem) !important; }

/* 3c. "WATCH" LINK WITH PLAY ICON (homepage hero, right side)
   Where: "Watch Chris' Video Series / Is God Mean?" with the big play
   triangle on the right side of the homepage hero.
   Class: cu-hero-watch (on the Paragraph block inside the hero).
   What: pins the link to the right side of the hero, vertically centered,
   and draws the white play triangle after the text (turns gold on hover).
   The words and where the link goes are normal paragraph text and a link:
   edit them in the page editor (no code). On phones it sits under the
   buttons instead (section 14).
   Safe to change: 110px = size of the play triangle on desktop (phones use
   40px, section 14); the "right" value = how
   far it sits from the right edge of the screen.
   The first two rules let the link measure "right side" against the whole
   hero (WordPress otherwise shrinks the hero's text area to the width of the
   text) while keeping the headline and buttons exactly where they were. */
.cu-hero-cover .wp-block-cover__inner-container { width: 100% !important; }
.cu-hero-cover .wp-block-cover__inner-container > .wp-block-group { margin-left: 0 !important; }
.cu-hero-cover .cu-hero-watch {
	position: absolute; right: clamp(2rem, 5vw, 5rem); top: 42%; transform: translateY(-50%); z-index: 2; margin: 0;
	text-align: right; font-weight: 800; line-height: 1.35;
}
.cu-hero-watch a { display: inline-flex; align-items: center; gap: 1.1rem; text-decoration: none; color: var(--wp--preset--color--base); }
.cu-hero-watch a::after {
	content: ""; flex: none; width: 110px; height: 110px; background: var(--wp--preset--color--base);
	clip-path: polygon(18% 6%, 94% 50%, 18% 94%); transition: background .2s ease;
}
.cu-hero-watch a:hover, .cu-hero-watch a:focus { color: var(--wp--preset--color--accent-1); }
.cu-hero-watch a:hover::after, .cu-hero-watch a:focus::after { background: var(--wp--preset--color--accent-1); }


/* -----------------------------------------------------------------------------
   4. PHOTO GALLERIES: UNIFORM CROPPING
   Where: every photo gallery (Home, About, Speaking, Outreach, Music, and the
   three "see all photos" pages).
   Class: cu-grid = tall 4:5 shape (Speaking, Outreach, About, photo pages)
          cu-grid-wide = wide 3:2 shape (Home speaking photos, Music)
   What: makes every photo in the grid the same shape so rows line up.
   Only applies while the gallery's "Crop images to fit" setting is ON
   (that's the "is-cropped" part). Turn that setting off in the editor to show
   the photos uncropped in the grid.
   Safe to change: the ratios, e.g. 4/5 -> 1/1 for squares.
   The original photo files are never cropped; this is display only.
   ----------------------------------------------------------------------------- */
.cu-grid.wp-block-gallery.is-cropped img { aspect-ratio: 4/5; object-fit: cover; }
.cu-grid-wide.wp-block-gallery.is-cropped img { aspect-ratio: 3/2; object-fit: cover; }


/* -----------------------------------------------------------------------------
   5. PHOTO GALLERIES: FULL-SIZE VIEW WHEN CLICKED (LIGHTBOX)
   Where: the enlarged photo that opens when you click any gallery photo.
   Class: none (applies to WordPress's built-in lightbox everywhere).
   Why: by default WordPress keeps the gallery's cropped shape when enlarging.
   These rules show the whole, uncropped photo instead.
   Safe to change: 92vw / 88vh = the largest the photo can be, as a share of
   the screen's width / height.
   ----------------------------------------------------------------------------- */
.wp-lightbox-overlay .lightbox-image-container { width: auto !important; height: auto !important; }
.wp-lightbox-overlay .lightbox-image-container .wp-block-image { width: auto !important; height: auto !important; }
.wp-lightbox-overlay .lightbox-image-container img {
	width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
	max-width: 92vw !important; max-height: 88vh !important; aspect-ratio: auto !important; object-fit: contain !important;
}


/* -----------------------------------------------------------------------------
   6. HOMEPAGE: BOOK CARD OVERLAPPING THE HERO
   Where: the "Is God Mean?" card right under the homepage hero.
   Classes: cu-book-band = the dark section that holds the card and the
            speaking dates (its color is a block setting: Deep navy)
            cu-book-card  = the light rounded card (color and 28px rounded
            corners are block settings)
   What: draws the thin gold line where the hero ends, pulls the card up so it
   overlaps the hero, outlines the card in gold, adds the soft shadow, and
   gives the hero's text extra bottom space so the card doesn't cover the
   buttons.
   Safe to change:
     - 2px = thickness of the gold line (on cu-book-band) and of the gold
       outline around the card (on cu-book-card).
     - clamp(3.5rem, 7vw, 6rem) = how far the card overlaps the hero on desktop
       (the phone amount is in section 14).
     - 280px = the book cover's maximum width inside the card.
   ----------------------------------------------------------------------------- */
.cu-book-band { display: flow-root; position: relative; z-index: 1; border-top: 2px solid var(--wp--preset--color--accent-1); }
.cu-book-band > .cu-book-card {
	position: relative; z-index: 2; margin-top: calc(-1 * clamp(3.5rem, 7vw, 6rem)) !important;
	border: 2px solid var(--wp--preset--color--accent-1);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65);
}
.cu-book-card .cu-cover { max-width: 280px; margin-inline: auto; }
.cu-hero:has(+ .cu-book-band) .wp-block-media-text__content { padding-bottom: clamp(6rem, 11vw, 9rem); }


/* -----------------------------------------------------------------------------
   7. HOMEPAGE: SPEAKING DATES TABLE
   Where: the "Speaking dates" list under the book card.
   Class: cu-dates (on the Table block).
   What: removes the default table borders, adds thin divider lines between
   rows, makes the date gold, and turns the last column's link into an outline
   "MORE INFO" button that fills gold on hover.
   Editing the dates themselves needs no code: click into the table on the
   homepage and type; use the table toolbar to add or delete rows.
   (The phone layout, where each date stacks, is in section 14.)
   Safe to change: 40px = the space between the "Speaking dates" heading and
   the first row.
   ----------------------------------------------------------------------------- */
.cu-dates { margin-top: 40px !important; margin-bottom: 0; }
.cu-dates table { width: 100%; border-collapse: collapse; }
.cu-dates td { border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 1.1rem .75rem; font-weight: 700; vertical-align: middle; }
.cu-dates td:first-child { padding-left: 0; white-space: nowrap; color: var(--wp--preset--color--accent-1); }
.cu-dates td:last-child { padding-right: 0; text-align: right; }
.cu-dates td:last-child a {
	display: inline-block; padding: .55rem 1.2rem; border: 2px solid currentColor; border-radius: 999px; white-space: nowrap;
	font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.cu-dates td:last-child a:hover, .cu-dates td:last-child a:focus {
	background: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
}


/* -----------------------------------------------------------------------------
   8. BOOK COVER PLACEHOLDER
   Where: the navy "Is God Mean?" book shape on the homepage card and the
   Books page.
   Class: cu-cover (on the Group block that forms the cover).
   What: keeps it book-shaped (2:3), pushes the author name to the top and the
   title to the bottom, and adds the drop shadow.
   When the real cover art is ready: replace that Group block with an Image
   block of the cover. This rule can then be deleted.
   ----------------------------------------------------------------------------- */
.cu-cover { aspect-ratio: 2/3; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 60px -24px rgba(10, 22, 30, .5); }


/* -----------------------------------------------------------------------------
   9. EXPANDABLE LISTS
   Where: Music page "Highlights" (Touring, TV/radio/print, Studio work,
   Endorsements), and any other Details block you add.
   Class: none (applies to every Details block).
   What: each item is a light rounded card with a bold title and a round gold
   +/- button on the right that opens and closes it.
   Safe to change: 14px = card corner roundness; .75rem = space between cards.
   ----------------------------------------------------------------------------- */
.wp-block-details {
	padding: 1.1rem 1.4rem; border-radius: 14px;
	background: var(--wp--preset--color--accent-4);
}
.wp-block-details + .wp-block-details { margin-block-start: .75rem !important; }
.wp-block-details summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	list-style: none; font-weight: 800; cursor: pointer;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
	font-size: 1.2rem; line-height: 1; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
}
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details[open] summary { margin-bottom: .75rem; }


/* -----------------------------------------------------------------------------
   10. YOUTUBE VIDEOS (SINGLE VIDEOS)
   Where: individual embedded videos, e.g. the Is God Mean? episodes on the
   Videos and Books pages.
   Class: none (applies to every video Embed block).
   What: keeps every video in a 16:9 widescreen shape at any screen width.
   ----------------------------------------------------------------------------- */
.wp-block-embed.is-type-video iframe { aspect-ratio: 16/9; height: auto; width: 100%; }


/* -----------------------------------------------------------------------------
   11. SERMON CARDS
   Where: "Listen to messages" on the Speaking page.
   Classes: cu-sermons         = the Group block holding all the cards
            cu-sermon          = one sermon card (Group block)
            cu-sermon-desc     = the description under the player
            cu-sermon-download = the small gold "Download MP3" link
   What: shows the sermons as light cards with a thin gold outline, two per row
   on computers and one per row on phones, each with a full-width player.
   To add a sermon: select a card in the editor, Duplicate it, then change the
   title, the Audio block's file, the description, and the download link.
   Safe to change: 14px = card corner roundness; 24px = space between cards.
   ----------------------------------------------------------------------------- */
.cu-sermons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cu-sermons > * { margin: 0 !important; }
.cu-sermon {
	display: flex; flex-direction: column; padding: 22px 24px; border-radius: 14px;
	background: var(--wp--preset--color--accent-4); border: 2px solid var(--wp--preset--color--accent-1);
}
.cu-sermon > * { margin: 0 !important; }
.cu-sermon .wp-block-audio { margin-top: .6rem !important; }
.cu-sermon .wp-block-audio audio { width: 100%; }
.cu-sermon .cu-sermon-desc { margin-top: .8rem !important; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-3); }
.cu-sermon .cu-sermon-download { margin-top: auto !important; padding-top: 1rem; }
.cu-sermon .cu-sermon-download a {
	font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none; color: var(--wp--preset--color--accent-7);
}
@media (max-width: 781px) { .cu-sermons { grid-template-columns: 1fr; } }


/* -----------------------------------------------------------------------------
   12. FORMS (CONTACT FORM 7)
   Where: the booking form on the Contact page and the "Notify me" email form
   on the homepage book card and the Books page.
   Class: none for the booking form (applies to every Contact Form 7 form);
          cu-notify for the one-line Notify form (set in the shortcode as
          html_class="cu-notify").
   What: styles the labels, input boxes, and gold submit button to match the
   site, and puts the Notify form's email box and button on one line.
   To change the form fields or where emails go: wp-admin > Contact > Contact
   Forms (no code).
   ----------------------------------------------------------------------------- */

/* 12a. All forms: labels, inputs, focus outline, submit button */
.wpcf7 form > p { margin: 0 0 1.1rem; }
.wpcf7 label { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 700; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box; width: 100%; margin-top: .4rem; padding: .8rem 1rem;
	font: inherit; font-size: 1rem; font-weight: 400; color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--accent-6); border-radius: 10px;
}
.wpcf7 textarea { height: 9rem; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 1px; }
.has-contrast-background-color .wpcf7 input:focus { outline-color: var(--wp--preset--color--accent-1); }
.wpcf7 input[type="submit"] {
	padding: 1.05rem 1.9rem; border: 0; border-radius: 999px; cursor: pointer;
	font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--accent-1);
}
.wpcf7 input[type="submit"]:hover, .wpcf7 input[type="submit"]:focus { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.has-contrast-background-color .wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.wpcf7 .wpcf7-spinner { vertical-align: middle; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .75rem 1rem; }

/* 12b. Notify form only: email box and button side by side */
form.cu-notify { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; max-width: 560px; }
form.cu-notify > p { margin: 0; }
form.cu-notify > p:first-of-type { flex: 1 1 260px; }
form.cu-notify .wpcf7-response-output { flex-basis: 100%; }


/* -----------------------------------------------------------------------------
   13. YOUTUBE PLAYLIST GALLERIES (EMBEDPLUS PLUGIN)
   Where: "Watch" on the homepage, "Watch messages" on Speaking, the Music
   page, and the Messages / Music sections on the Videos page.
   Class: none (applies to every EmbedPlus gallery).
   What: matches the video titles and page buttons to the site's font and
   colors, and adds a gold outline when you hover over a thumbnail.
   Columns, videos per page, and autoplay are plugin settings (no code):
   wp-admin > EmbedPlus for YouTube > Galleries tab.
   ----------------------------------------------------------------------------- */
.epyt-gallery .epyt-gallery-title { font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.35; color: var(--wp--preset--color--contrast); }
.epyt-gallery .epyt-gallery-thumb:hover .epyt-gallery-img-box { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 2px; }
.epyt-gallery .epyt-pagination { margin-top: 1.25rem; font-size: var(--wp--preset--font-size--small); font-weight: 700; }
.epyt-gallery .epyt-pagebutton > div {
	padding: .6rem 1.2rem; border: 2px solid currentColor; border-radius: 999px;
	text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
}
.epyt-gallery .epyt-pagebutton:hover > div { background: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); }


/* -----------------------------------------------------------------------------
   15. HOMEPAGE: BIO PHOTO AND SOCIAL ICONS
   Where: the "Pastor's kid, touring musician, evangelist" section on the
   homepage.
   Class: cu-bio (on that section's outer Group block).
   What: rounds the photo's corners and gives it a thin gold outline (matching
   the book card), and spaces the row of social icons under the text.
   The icons themselves are a Social Icons block: click it in the editor to add,
   remove, or reorder profiles (no code). Their color is a block setting.
   Safe to change: 28px = how round the photo corners are (same as the book
   card); 2px = the outline thickness.
   ----------------------------------------------------------------------------- */
.cu-bio .wp-block-image img { border-radius: 28px; border: 2px solid var(--wp--preset--color--accent-1); }
.cu-bio .wp-block-social-links { margin-top: var(--wp--preset--spacing--50); }


/* -----------------------------------------------------------------------------
   16. HOMEPAGE: "FREE COURSE" SECTION (IS GOD MEAN? EPISODES)
   Where: the dark section after the bio with the episode thumbnails, the big
   Episode 1 picture, and the "Take the course" button.
   Classes: cu-course         = the whole section (Group block)
            cu-course-thumbs  = the small episode thumbnails (Gallery block)
            cu-course-feature = the big Episode 1 picture (Image block)
   What: keeps thumbnails in the YouTube 16:9 shape with rounded corners and a
   gold outline (they lift slightly on hover), rounds the big picture to match
   the book card, and draws the round play button in its center.
   To change which episode a picture links to: click the picture in the editor
   and edit its link (no code). To swap a picture: Replace in its toolbar.
   Safe to change: 14px / 28px = corner roundness (thumbnails / big picture);
   96px = size of the play button circle.
   ----------------------------------------------------------------------------- */
/* The series title above the big picture: centered; "Is God Mean?" on its own
   larger line (cu-course-series), subtitle below in small caps. Safe to change:
   1.75rem = size of "Is God Mean?"; spacing-40 = gap down to the big picture. */
.cu-course h3.cu-label { text-align: center; }
.cu-course h3.cu-label .cu-course-series { display: inline-block; margin-bottom: .4rem; font-size: 1.75rem; letter-spacing: .1em; line-height: 1.1; }
.cu-course h3.cu-label + .wp-block-group { margin-top: var(--wp--preset--spacing--40) !important; }
.cu-course .cu-course-thumbs.is-cropped img { aspect-ratio: 16/9; object-fit: cover; }
.cu-course .cu-course-thumbs img {
	border-radius: 14px; border: 2px solid var(--wp--preset--color--accent-1);
	transition: transform .2s ease;
}
.cu-course .cu-course-thumbs a:hover img, .cu-course .cu-course-thumbs a:focus img { transform: translateY(-3px); }
.cu-course .cu-course-feature { margin: 0; }
.cu-course .cu-course-feature a { position: relative; display: block; }
.cu-course .cu-course-feature img { width: 100%; border-radius: 28px; border: 2px solid var(--wp--preset--color--accent-1); }
/* Play button: a translucent circle (before) with a white triangle (after) */
.cu-course .cu-course-feature a::before,
.cu-course .cu-course-feature a::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.cu-course .cu-course-feature a::before {
	width: 96px; height: 96px; border-radius: 50%;
	background: rgba(255, 255, 255, .28); backdrop-filter: blur(4px); transition: background .2s ease;
}
.cu-course .cu-course-feature a::after {
	width: 34px; height: 38px; margin-left: 4px; background: var(--wp--preset--color--base);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.cu-course .cu-course-feature a:hover::before, .cu-course .cu-course-feature a:focus::before { background: rgba(245, 210, 111, .75); }


/* -----------------------------------------------------------------------------
   17. HOMEPAGE: YOUTUBE SECTION (SUBSCRIBE BUTTONS + FEATURED VIDEO)
   Where: the light section near the bottom of the homepage with "YouTube",
   the Subscribe / Watch the latest buttons, and the featured sermon video.
   Classes: cu-youtube         = the whole section (Group block)
            cu-youtube-buttons = the two stacked buttons (Buttons block)
            cu-rounded-video   = the featured video (Embed block)
            cu-center          = centers the small "FEATURED" label
   What: makes the two buttons the same width, rounds the video's corners
   with a soft shadow, and centers the label.
   How Subscribe works: its link ends in "?sub_confirmation=1", which opens
   the YouTube channel with the Subscribe pop-up already showing. To change
   the featured video: click it in the editor and paste a new YouTube link.
   Safe to change: 300px = button width; 24px = video corner roundness.
   ----------------------------------------------------------------------------- */
.cu-youtube-buttons .wp-block-button { min-width: 300px; }
.cu-youtube-buttons .wp-block-button__link { width: 100%; }
.cu-center { text-align: center; }
.cu-rounded-video .wp-block-embed__wrapper {
	border-radius: 24px; overflow: hidden; box-shadow: 0 24px 48px -24px rgba(10, 22, 30, .45);
}
.cu-rounded-video iframe { display: block; }


/* -----------------------------------------------------------------------------
   18. BLOG
   Where: the Blog page (chrisulery.com/blog/), category pages, and every post.
   Templates: the layouts themselves are theme templates (Appearance > Editor >
   Templates: "Blog Home", "All Archives", "Single Posts"). Edit text and
   blocks there; this section only styles them.
   Classes: cu-topics / cu-topic = the "Explore by topic" photo tiles (built by
            the [cu_topics] code in functions.php, section 4a)
            cu-post-grid / cu-post-card = the grids of post cards
            cu-noimg = the navy panel shown for posts with no featured image
            cu-archive-head = the navy header on category pages
            cu-article* = the single post layout; cu-archive-note = the
            "From the archive" line; cu-author-box; cu-comments
   Safe to change: 18px / 14px = corner roundness of tiles / cards; the
   font sizes of .cu-article-title and the post headings (h2, h3).
   ----------------------------------------------------------------------------- */

/* 18a. Blog page intro + topic tiles: 4 across, the first one double-wide */
.cu-blog-title { font-size: var(--wp--preset--font-size--xx-large); }
.cu-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--wp--preset--spacing--50); }
.cu-topic {
	position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 18px;
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); text-decoration: none;
}
.cu-topic:first-child { grid-column: span 2; aspect-ratio: auto; }
.cu-topic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cu-topic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 22, 30, .85) 0%, rgba(10, 22, 30, .15) 60%); }
.cu-topic__text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: grid; gap: 2px; }
.cu-topic__name { font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.cu-topic__count { font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--accent-1); }
.cu-topic:hover img, .cu-topic:focus-visible img { transform: scale(1.04); }
.cu-topic:focus-visible { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 3px; }

/* 18b. Post cards (Blog page, category pages, "More from the blog") */
.cu-post-grid { gap: 22px !important; }
.cu-post-card { height: 100%; background: var(--wp--preset--color--base); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px -20px rgba(10, 22, 30, .35); }
.cu-post-card .wp-block-post-featured-image { margin: 0; }
.cu-post-card .wp-block-post-featured-image img { border-radius: 0; }
.cu-post-card__body { padding: 18px 20px 22px; }
.cu-post-card__body > * + * { margin-block-start: .5rem; }
.cu-post-card .cu-label { font-size: .75rem; color: var(--wp--preset--color--accent-7); }
.cu-post-card .cu-label a { text-decoration: none; color: inherit; }
.cu-post-card .wp-block-post-title { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; }
.cu-post-card .wp-block-post-title a { text-decoration: none; }
.cu-post-card .wp-block-post-title a:hover { text-decoration: underline; }
.cu-post-card__date { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-3); }
.cu-post-card .wp-block-post-excerpt { font-size: .95rem; line-height: 1.55; }
.cu-post-card .wp-block-post-excerpt__more-text { display: none; }
/* Navy panel for posts without a featured image (functions.php 4c) */
.cu-noimg { margin: 0; aspect-ratio: 3/2; background: var(--wp--preset--color--contrast); }
.cu-noimg a { display: grid; place-items: center; height: 100%; text-decoration: none; }
.cu-noimg span { color: var(--wp--preset--color--accent-1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
/* Page numbers */
.cu-pagination { margin-top: var(--wp--preset--spacing--60); gap: .5rem; font-weight: 700; }
.cu-pagination .page-numbers, .cu-pagination a { padding: .4rem .8rem; border-radius: 999px; text-decoration: none; }
.cu-pagination .current { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* 18c. Category pages: navy header */
.cu-archive-head .cu-label a { text-decoration: none; }
.cu-archive-head .wp-block-query-title { font-size: var(--wp--preset--font-size--xx-large); }

/* 18d. Single post */
.cu-article-head .cu-label { color: var(--wp--preset--color--accent-7); }
.cu-article-head .cu-label a { text-decoration: none; color: inherit; }
.cu-article-title { font-size: clamp(2rem, 4.5vw, 3rem) !important; line-height: 1.1; }
.cu-article-meta { gap: .35rem .9rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-3); }
.cu-article-meta .wp-block-post-author-name::before { content: "by "; }
/* The base theme colors post dates with the Mist slot (too light here): use Slate */
.cu-article-meta .wp-block-post-date, .cu-post-card .wp-block-post-date, .cu-comment .wp-block-comment-date { color: var(--wp--preset--color--accent-3) !important; }
.cu-archive-note {
	display: inline-block; padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
	background: var(--wp--preset--color--accent-4); color: var(--wp--preset--color--accent-3);
}
.cu-article-image img { width: 100%; border-radius: 22px; }
.cu-article-body h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.2rem; }
.cu-article-body h3 { font-size: var(--wp--preset--font-size--large); margin-top: 1.8rem; }
.cu-article-body h4, .cu-article-body h5, .cu-article-body h6 { font-size: var(--wp--preset--font-size--medium); }
.cu-article-body img { height: auto; border-radius: 12px; }
.cu-article-body blockquote { border-left: 3px solid var(--wp--preset--color--accent-1); margin-left: 0; padding-left: 1.25rem; }
.cu-author-box { padding: 22px 24px; border-radius: 14px; }
.cu-author-box .wp-block-post-author__byline { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--wp--preset--color--accent-7); }
.cu-author-box .wp-block-post-author__name { font-weight: 800; font-size: 1.15rem; }
.cu-comments .wp-block-comments-title { font-size: var(--wp--preset--font-size--large); }
.cu-comment { padding: 16px 0; border-top: 1px solid var(--wp--preset--color--accent-5); }
.cu-comment .wp-block-comment-author-name, .cu-comment .wp-block-comment-author-name a { font-weight: 800; color: var(--wp--preset--color--contrast) !important; }
.cu-comment .wp-block-comment-date a { color: inherit; text-decoration: none; }
.cu-comment .wp-block-comment-date { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-3); }


/* -----------------------------------------------------------------------------
   19. HOMEPAGE: SPEAKING SECTION (COLLAGE + FEATURED SERMON)
   Where: the "Speaking" section on the homepage (collage on the left, text,
   featured sermon player, and buttons on the right).
   Classes: cu-speaking         = the whole section (Group block)
            cu-speaking-feature = the light card holding the sermon title and
                                  audio player (Group block)
   What: the collage image already has its rounded gold-edged photos baked in,
   so it gets no extra border here. The sermon card gets rounded corners, a thin
   gold outline, and a full-width audio player.
   To feature a different sermon: click the Audio block in the card and replace
   the file/URL, then edit the bold title above it. No code needed.
   Safe to change: 14px = card corner roundness; 2px = outline thickness.
   ----------------------------------------------------------------------------- */
.cu-speaking .cu-speaking-collage img { width: 100%; height: auto; }
.cu-speaking-feature { padding: 20px 24px; border-radius: 14px; border: 2px solid var(--wp--preset--color--accent-1); }
.cu-speaking-feature .wp-block-audio { margin-top: .6rem; }
.cu-speaking-feature .wp-block-audio audio { width: 100%; }


/* -----------------------------------------------------------------------------
   20. HOMEPAGE: RECOMMENDATIONS SLIDER
   Where: "What leaders are saying", under the bio on the homepage (inside the
   bio section).
   Classes: cu-recs        = the heading + slider (Group block)
            cu-recs-track  = the row of cards that slides (Group block)
            cu-rec         = one recommendation card (Group block)
            cu-rec-quote   = the quote text (Paragraph)
            cu-rec-person  = the photo + name row at the bottom of a card
            cu-rec-photo   = the round headshot (Image block)
            cu-rec-role    = the person's title under their name
   What: shows 3 cards at a time on computers, 2 on tablets, 1 (with the next
   peeking in) on phones. Visitors swipe, or use the round arrow buttons that
   js/cu-recs.js adds under the cards. That file also slides the cards every
   4 seconds (the timing is set at the top of js/cu-recs.js).
   To add a recommendation: in the editor, select a card (cu-rec), Duplicate
   it, then change the quote, photo, name, and title. Drag cards to reorder.
   Safe to change: 24px = space between cards; 64px = headshot size;
   14px = card corner roundness.
   ----------------------------------------------------------------------------- */
.cu-recs { margin-top: var(--wp--preset--spacing--80) !important; }
.cu-recs-track {
	display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; padding: 4px 2px 16px;
}
.cu-recs-track::-webkit-scrollbar { display: none; }
.cu-recs-track > .cu-rec {
	flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; margin: 0 !important;
	display: flex; flex-direction: column; gap: 1.25rem; padding: 28px;
	background: var(--wp--preset--color--accent-4); border-radius: 14px;
}
/* The big gold quotation mark at the top of each card */
.cu-rec::before { content: "\201C"; display: block; height: 2.2rem; font-size: 4.5rem; line-height: 1; font-weight: 800; color: var(--wp--preset--color--accent-1); }
.cu-rec .cu-rec-quote { flex: 1; margin: 0; }
.cu-rec .cu-rec-person { gap: 14px; align-items: center; margin: 0; }
.cu-rec .cu-rec-photo { flex: 0 0 64px; margin: 0; }
.cu-rec .cu-rec-photo img { width: 64px; height: 64px; object-fit: cover; object-position: center top; border-radius: 50%; border: 2px solid var(--wp--preset--color--accent-1); }
.cu-rec .cu-rec-person p { margin: 0; line-height: 1.35; }
.cu-rec .cu-rec-role { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-3); }
/* Arrow buttons (added by js/cu-recs.js) */
.cu-recs-nav { display: flex; justify-content: center; gap: 12px; margin-top: var(--wp--preset--spacing--40); }
.cu-recs-nav button {
	width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.2rem;
	border: 2px solid var(--wp--preset--color--contrast); background: transparent; color: var(--wp--preset--color--contrast);
}
.cu-recs-nav button:hover, .cu-recs-nav button:focus-visible { background: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); }
@media (max-width: 1000px) { .cu-recs-track > .cu-rec { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 600px) { .cu-recs-track > .cu-rec { flex-basis: 85%; } }


/* -----------------------------------------------------------------------------
   21. HOMEPAGE: BLOG SECTION
   Where: the "Blog" section at the bottom of the homepage.
   Classes: cu-blog-home    = the whole section (Group block)
            cu-blog-feature = the newest post: photo left, text right
            cu-blog-more    = the row of the next 3 posts (Query Loop block)
   What: the posts fill in on their own. The top one is always the newest
   post, the row below shows the next three. No photo is shown in the row.
   The gold category label above each title matches the Blog page cards.
   To change how many posts show, or skip a post: click the Query Loop block
   in the editor and use its settings (Items per page / Offset). No code.
   Safe to change: 28px = photo corner roundness; 5fr 7fr = photo vs. text
   width in the top post.
   ----------------------------------------------------------------------------- */
.cu-blog-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--wp--preset--spacing--60); align-items: center; }
.cu-blog-feature .wp-block-post-featured-image, .cu-blog-feature .wp-block-post-featured-image img { margin: 0; border-radius: 28px; overflow: hidden; }
.cu-blog-home .wp-block-post-title { font-size: var(--wp--preset--font-size--large); line-height: 1.25; }
.cu-blog-home .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.cu-blog-home .wp-block-post-title a:hover { text-decoration: underline; }
.cu-blog-home .wp-block-post-excerpt__excerpt { margin: .6rem 0 0; }
.cu-blog-home .wp-block-read-more {
	display: inline-block; margin-top: .9rem; font-size: var(--wp--preset--font-size--small); font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--accent-7);
}
.cu-blog-home .cu-label { margin: 0 0 .5rem; font-size: .75rem; color: var(--wp--preset--color--accent-7); }
.cu-blog-home .cu-label a { text-decoration: none; color: inherit; }
.cu-blog-feature .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); }
.cu-blog-more { margin-top: var(--wp--preset--spacing--70) !important; }
/* Each post in the row is a column, so the "Read more" links line up at the bottom */
.cu-blog-more .wp-block-post-template > li { display: flex; flex-direction: column; }
.cu-blog-more .wp-block-post-title, .cu-blog-more .wp-block-post-excerpt { margin-top: 0; margin-bottom: 0; }
.cu-blog-more .wp-block-read-more { margin-top: auto; padding-top: .9rem; align-self: flex-start; }
.cu-blog-more .wp-block-post-template { gap: var(--wp--preset--spacing--60); }
@media (max-width: 781px) { .cu-blog-feature { grid-template-columns: 1fr; } }


/* -----------------------------------------------------------------------------
   22. HOMEPAGE: "WORD + WORSHIP" (FFH) SECTION
   Where: the navy "From the FFH stage to the pulpit" section on the homepage.
   Classes: cu-word        = the whole section (Group block)
            cu-word-photo  = the stage photo on the right (Image block)
            cu-word-card   = the white card overlapping the bottom of the photo
            cu-word-points = the list of credits inside that card (List block)
   What: rounds the photo with the same gold outline as the other homepage
   photos and crops it to a portrait shape, then pulls the white card up over
   the photo's bottom-left corner. Each list item gets a gold check mark.
   To swap the photo: click it in the editor > Replace. To edit the credits,
   just type in the list. No code needed.
   Safe to change: 4 / 5 = the photo's crop shape (try 1 / 1 or 4 / 3);
   "center" = which part of the photo stays in view (e.g. "30% center");
   -90px / -40px = how far the card overlaps the photo (up / left).
   ----------------------------------------------------------------------------- */
.cu-word .cu-word-photo { margin: 0; }
.cu-word .cu-word-photo img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center;
	border-radius: 28px; border: 2px solid var(--wp--preset--color--accent-1);
}
.cu-word .cu-word-card {
	position: relative; width: min(380px, 92%); margin: -90px 0 0 -40px !important; padding: 22px 26px;
	border-radius: 14px; border: 2px solid var(--wp--preset--color--accent-1);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6);
}
.cu-word-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; font-weight: 700; }
.cu-word-points li { position: relative; padding-left: 2rem; }
.cu-word-points li::before {
	content: "\2713"; position: absolute; left: 0; top: .1em; width: 1.3rem; height: 1.3rem; border-radius: 50%;
	display: grid; place-items: center; font-size: .75rem; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
}
@media (max-width: 781px) { .cu-word .cu-word-card { margin: -60px auto 0 !important; } }


/* -----------------------------------------------------------------------------
   23. INNER PAGES (ABOUT, SPEAKING, MUSIC, BOOKS, VIDEOS, CONTACT, OUTREACH)
   These rules carry the homepage look onto the other pages.

   23a. Page heroes: the same full-width photo + navy fade as the homepage,
        a little shorter. Class: cu-hero-inner (added next to cu-hero-cover
        on the Cover block). Safe to change: 640px / 72vh = hero height.
   23b. Videos: rounded corners on every YouTube video and playlist player.
        Safe to change: 18px = corner roundness.
   23c. Photo galleries (cu-grid, cu-grid-wide): rounded photo corners.
        Safe to change: 14px = corner roundness.
   23d. Text spacing: tighter gaps between paragraphs and under headings in
        the full-width sections, so long text reads as one story.
   23e. Photos inside a story: any Image block placed directly in a
        full-width section (like the About page story) automatically gets
        rounded corners and the thin gold outline, at its natural shape, so
        new photos you add match without any setting. Add the class
        cu-story-photo to also crop a photo to a wide shape.
        Safe to change: 28px = corner roundness; 3 / 2 = crop shape.
   23f. Recommendation cards in a grid (About page) and a single card
        (Contact page). Classes: cu-recs-grid (Group holding the cards) and
        cu-rec-solo (one card on its own). The card itself is styled in 20.
   ----------------------------------------------------------------------------- */
/* 23a */
.cu-hero-cover.cu-hero-inner.wp-block-cover { min-height: min(72vh, 640px) !important; }
@media (max-width: 781px) { .cu-hero-cover.cu-hero-inner.wp-block-cover { min-height: 72vh !important; } }
/* 23b */
.wp-block-embed.is-type-video .wp-block-embed__wrapper { border-radius: 18px; overflow: hidden; }
.wp-block-embed.is-type-video iframe { display: block; }
.epyt-gallery iframe, .epyt-video-wrapper, .epyt-video-wrapper iframe { border-radius: 18px; overflow: hidden; }
.epyt-gallery .epyt-gallery-img-box, .epyt-gallery .epyt-gallery-img { border-radius: 10px; overflow: hidden; }
/* 23c */
.wp-block-gallery.cu-grid .wp-block-image img, .wp-block-gallery.cu-grid-wide .wp-block-image img { border-radius: 14px; }
/* 23d */
.wp-block-group.alignfull > p + p { margin-block-start: 1.1rem; }
.wp-block-group.alignfull > :is(h2, h3) + p { margin-block-start: 1rem; }
.wp-block-group.alignfull > p + :is(h2, h3) { margin-block-start: var(--wp--preset--spacing--60); }
.wp-block-group.alignfull > .cu-label + :is(h1, h2, h3), .wp-block-column > .cu-label + :is(h1, h2, h3) { margin-block-start: .5rem; }
/* 23e */
.wp-block-group.alignfull > .wp-block-image { margin-block: var(--wp--preset--spacing--50) !important; }
.wp-block-group.alignfull > .wp-block-image img {
	height: auto; border-radius: 28px; border: 2px solid var(--wp--preset--color--accent-1);
}
.cu-story-photo { margin-block: var(--wp--preset--spacing--50) !important; }
.cu-story-photo img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 35%;
	border-radius: 28px; border: 2px solid var(--wp--preset--color--accent-1);
}
/* 23f */
.cu-recs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.cu-recs-grid > .cu-rec, .cu-rec.cu-rec-solo {
	margin: 0 !important; display: flex; flex-direction: column; gap: 1.25rem; padding: 28px;
	border-radius: 14px; background: var(--wp--preset--color--base); box-shadow: 0 10px 30px -20px rgba(10, 22, 30, .35);
}
.cu-rec.cu-rec-solo { background: var(--wp--preset--color--accent-4); box-shadow: none; padding: 24px; }
.cu-recs-section .cu-recs { margin-top: 0 !important; }
@media (max-width: 781px) { .cu-recs-grid { grid-template-columns: 1fr; } }


/* -----------------------------------------------------------------------------
   14. PHONES AND SMALL TABLETS (screens narrower than 782px)
   Everything inside this block only applies on small screens. Each line
   adjusts one of the sections above; the section number is noted.
   ----------------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* 3. Heroes: drop the minimum height so the photo and text simply stack */
	.cu-hero.wp-block-media-text { min-height: 0; }
	/* 3. Heroes: keep the photo from filling the whole phone screen; 30% keeps faces in frame */
	.cu-hero .wp-block-media-text__media img { max-height: 62vh; object-fit: cover; object-position: center 30%; }
	/* 3b. Full-width hero: navy rises from the bottom (text sits low, face stays clear above) */
	.cu-hero-cover.wp-block-cover { min-height: 88vh !important; align-items: flex-end; }
	.cu-hero-cover .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(10, 22, 30, .97) 0%, rgba(10, 22, 30, .85) 40%, rgba(10, 22, 30, .1) 75%) !important;
	}
	/* 3c. Watch link: sits under the buttons, left-aligned, smaller triangle */
	.cu-hero-cover .cu-hero-watch { position: static; transform: none; text-align: left; margin-top: var(--wp--preset--spacing--40); }
	.cu-hero-watch a { flex-direction: row-reverse; justify-content: flex-end; }
	.cu-hero-watch a::after { width: 40px; height: 40px; }
	/* 16. Free course: smaller play button on the big episode picture */
	.cu-course .cu-course-feature a::before { width: 64px; height: 64px; }
	.cu-course .cu-course-feature a::after { width: 22px; height: 25px; margin-left: 3px; }
	/* 18. Blog: topic tiles 2 across (first stays full width), one card per row */
	.cu-topics { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.cu-topic { aspect-ratio: 1/1; }
	.cu-topic:first-child { aspect-ratio: 2/1; }
	.cu-topic__name { font-size: 1.05rem; }
	/* 8. Book cover placeholder: smaller on phones */
	.cu-cover { max-width: 260px; }
	/* 6. Book card: overlap the hero by a smaller amount on phones */
	.cu-book-band > .cu-book-card { margin-top: -3rem !important; }
	/* 7. Speaking dates: stack date / city / church / event, with the button on the right */
	.cu-dates tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.cu-dates td { display: block; border: 0; padding: 0; }
	.cu-dates td:last-child { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}