/*
Theme Name:     Franklin Bridge Club
Theme URI:
Description:    Kadence child theme.
Author:         Me
Author URI:
Template:       kadence
Version:        0.1.0
*/

/* ==========================================================================
   FBC custom styles
   Classes are applied through each block's "Additional CSS class(es)" field.
   Breakpoints match Kadence: tablet <= 1024px, mobile <= 767px.
   ========================================================================== */

/* --- Sections -------------------------------------------------------------
   .fbc-section: a page section (Group block). Adds side gutters, because the
   full-width page layout has none. Vertical padding is set per section below
   so it can shrink on smaller screens.
   Note: on this (classic) theme WordPress wraps a Group's contents in
   .wp-block-group__inner-container, so "direct child" rules go through it.
   (Groups using the Grid or Row layout don't get that wrapper.) */
.fbc-section {
	padding-left: var(--global-content-edge-padding);
	padding-right: var(--global-content-edge-padding);
}

/* --- Images ----------------------------------------------------------------
   Kadence gives any Image block with rounded corners ("has-custom-border") a
   solid border in the text colour, which shows as a thin dark outline. Remove
   it unless the image has a border width set on purpose in the block. */
.wp-block-image.has-custom-border img:not([style*="border-width"]) {
	border-width: 0;
}

/* --- File blocks (any page) ----------------------------------------------
   WordPress is saving File blocks here with an empty download button, which
   shows as a blank button. This labels any empty one "Download" on the live
   site. A button with its own text keeps it. body:not(.editor-styles-wrapper)
   keeps it out of the editor, so admins still see the real (empty) text. */
body:not(.editor-styles-wrapper) .wp-block-file__button:empty::after {
	content: "Download";
}

/* --- Reusable layout helpers (any page) -------------------------------------
   .fbc-pad-top / .fbc-pad-bottom: standard 96px section spacing (56px on
   phones), for sections that don't have their own spacing class.
   .fbc-split: a two-column Columns block with a 64px gap.
   .fbc-details: a column of short H3 + paragraph pairs (e.g. session details). */
.fbc-pad-top {
	padding-top: 96px;
}

.fbc-pad-bottom {
	padding-bottom: 96px;
}

.single-content .fbc-split {
	gap: 64px;
	margin-bottom: 0;
}

.single-content .fbc-details > * {
	margin-top: 0;
	margin-bottom: 8px;
}

.single-content .fbc-details > h3:not(:first-child) {
	margin-top: 28px;
}

.single-content .fbc-details > *:last-child {
	margin-bottom: 0;
}

/* .fbc-section-intro: a short intro paragraph under a section heading. */
.single-content .fbc-section-intro {
	max-width: 760px;
	margin-bottom: 32px;
}

/* --- Tournaments (Play page) -----------------------------------------------
   .fbc-tournament-list: the Query Loop's Post Template (a 2-column grid).
   It's a list, so Kadence's list indent is removed; the gap is set here
   because block gap settings are switched off by the theme.
   .fbc-tournament-content: each tournament post's content inside its card. */
.single-content .fbc-tournament-list {
	margin: 0;
	padding: 0;
	gap: 24px;
}

.single-content .fbc-tournament-content > * {
	margin-top: 0;
	margin-bottom: 8px;
}

.single-content .fbc-tournament-content > .wp-block-file {
	margin-top: 16px;
}

.single-content .fbc-tournament-content > *:last-child {
	margin-bottom: 0;
}

/* .fbc-cta: a call-to-action panel (Group with .fbc-panel; navy colour set on
   the block). Centres its heading and button. */
.fbc-cta {
	text-align: center;
}

.single-content .fbc-cta h2.fbc-section-title {
	margin-bottom: 24px;
}

/* .fbc-next-tournament-list: the one-item Query Loop list inside the Home
   page's Next tournament card (post title + excerpt). */
.single-content .fbc-next-tournament-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-content .fbc-next-tournament-list .wp-block-post-title {
	margin: 0 0 14px;
}

.single-content .fbc-next-tournament-list .wp-block-post-excerpt,
.single-content .fbc-next-tournament-list .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* --- Learn: About our lessons -------------------------------------------
   .fbc-fact-grid: the Grid Group of fact cards (3 columns set on the block;
   also used for the Club documents and Learn useful-links cards;
   2 on tablets, 1 on phones below). The gap is set here because block gap
   settings are switched off by the theme. .fbc-fact: a small fact card
   (label + value) that also uses .fbc-card. .fbc-enrol: the "How to enrol"
   line under the grid. */
.single-content .fbc-fact-grid {
	gap: 24px;
}

.fbc-card.fbc-fact {
	gap: 8px;
}

.single-content .fbc-enrol {
	margin: 32px 0 0;
}

/* --- Learn: Useful links --------------------------------------------------
   .fbc-links: a card (also .fbc-card) with a heading and a List block of
   external links. Tidies the list spacing and uses the site's red links. */
.single-content .fbc-links .wp-block-list {
	margin: 0;
	padding-left: 1.1em;
}

.single-content .fbc-links .wp-block-list > li {
	margin: 0 0 8px;
}

.single-content .fbc-links .wp-block-list > li:last-child {
	margin-bottom: 0;
}

.fbc-links a {
	color: var(--global-palette2);
	text-underline-offset: 0.15em;
}

/* --- Learn: Common questions ----------------------------------------------
   .fbc-faq: the section. Styles every core Details block inside it, so new
   questions added by duplicating one need no class of their own. Each
   question gets a divider line; the text stays at a readable width.
   .fbc-years (Club page) uses the same look for its year sections.
   Each item has a top and bottom line, overlapped by 1px, so the visible
   items are always framed even when some (empty years) are hidden. */
.single-content .fbc-faq .wp-block-details,
.single-content .fbc-years .wp-block-details {
	max-width: 860px;
	margin: -1px 0 0;
	padding: 20px 0;
	border-top: 1px solid var(--global-palette7);
	border-bottom: 1px solid var(--global-palette7);
}

.fbc-faq .wp-block-details summary,
.fbc-years .wp-block-details summary {
	font-family: 'Bricolage Grotesque', sans-serif; /* the theme's heading font */
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--global-palette3);
	cursor: pointer;
}

.fbc-faq .wp-block-details summary::marker,
.fbc-years .wp-block-details summary::marker {
	color: var(--global-palette1);
}

.single-content .fbc-faq .wp-block-details > :not(summary),
.single-content .fbc-years .wp-block-details > :not(summary) {
	margin: 12px 0 0;
	color: var(--global-palette5);
}

/* --- Learn: Lesson resources ----------------------------------------------
   .fbc-lesson-list: the Query Loop's Post Template (3-column grid set on the
   block; 2 on tablets, 1 on phones below). It's a list, so Kadence's list
   indent is removed. .fbc-lesson: each lesson card (also .fbc-card): title,
   excerpt, and the "Handouts and files" link pinned to the bottom, styled
   like the other cards' links. */
.single-content .fbc-lesson-list {
	margin: 0;
	padding: 0;
	gap: 24px;
}

.single-content .fbc-lesson .wp-block-post-title {
	margin: 0;
}

.fbc-lesson .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 16px;
	margin: 0;
}

.single-content .fbc-lesson .wp-block-post-excerpt > p {
	margin: 0;
}

.single-content .fbc-lesson .wp-block-post-excerpt__more-text {
	margin-top: auto;
	font-size: 17px;
	font-weight: 700;
}

.fbc-lesson .wp-block-post-excerpt__more-link {
	color: var(--global-palette2);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Learn: Get in touch ---------------------------------------------------
   .fbc-contact-panel: the light panel (also .fbc-panel .fbc-cta; colour,
   corners and padding set on the block). Evens out the paragraph spacing:
   a bigger gap after the intro, then the email and phone lines close together. */
.single-content .fbc-contact-panel .wp-block-group__inner-container > p {
	margin: 0 0 8px;
}

.single-content .fbc-contact-panel .wp-block-group__inner-container > h2 + p {
	margin-bottom: 24px;
}

.single-content .fbc-contact-panel .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* --- Club: Club documents -------------------------------------------------
   .fbc-doc: a document card (also .fbc-card): title, description, "Last
   updated" line and a File block pinned to the bottom. The File block's
   download button can't be styled in the block, so it's given the site's
   navy button look here. */
.single-content .fbc-doc .wp-block-file {
	margin-top: auto;
	padding-top: 8px;
}

.fbc-doc .wp-block-file .wp-block-file__button,
.fbc-doc-list .wp-block-file .wp-block-file__button {
	padding: 0.35em 0.9em; /* scales with the file name's text size */
	border-radius: 8px;
	background: var(--global-palette3);
	color: var(--global-palette9);
	font-size: inherit;
	font-weight: 700;
}

/* --- Club: minutes and newsletter lists -----------------------------------
   .fbc-doc-list: the Query Loop's Post Template inside each year section.
   One row per document: title on the left, its File block (from the post
   content) on the right, with a divider between rows. Stacks on phones. */
.single-content .fbc-doc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-content .fbc-doc-list > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--global-palette7);
}

.single-content .fbc-doc-list > li:last-child {
	border-bottom: 0;
}

.single-content .fbc-doc-list .wp-block-post-title,
.single-content .fbc-doc-list .wp-block-post-content > * {
	margin: 0;
}

/* PDFs get an inline preview by default ("Show inline embed" on the File
   block). It's far too big for a card or list row, so it's hidden here; it
   still shows when the post itself is opened. */
.fbc-doc .wp-block-file__embed,
.fbc-doc-list .wp-block-file__embed {
	display: none;
}

.fbc-doc-list .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

/* .fbc-year: a year section (Details block) on the Club page. On the live
   site, a year whose Query Loop has no documents is hidden. The
   body:not(.editor-styles-wrapper) start means this never matches in the
   block editor, so admins still see every year there. */
body:not(.editor-styles-wrapper) .fbc-year:has(.wp-block-query-no-results) {
	display: none;
}

/* --- Club: Club officers --------------------------------------------------
   .fbc-officers: the Role | Name Table block. It also uses .fbc-session-table
   (no borders, bold first column); this adds the readable width and a light
   divider between rows. The extra classes beat .fbc-session-table's border:0. */
figure.wp-block-table.fbc-session-table.fbc-officers {
	max-width: 860px;
	margin: 0;
}

figure.wp-block-table.fbc-session-table.fbc-officers td {
	padding: 12px 16px 12px 0;
	vertical-align: top;
	border-bottom: 1px solid var(--global-palette7);
}

figure.wp-block-table.fbc-session-table.fbc-officers tr:first-child td {
	border-top: 1px solid var(--global-palette7);
}

/* --- Inner pages: Page banner ---------------------------------------------
   .fbc-page-banner: the Cover block in the synced "Page banner" pattern
   (photo, white overlay and 320px minimum height are set on the block).
   This centres the H1 and intro, spaces them, adds the section's top and
   bottom padding, and removes Kadence's gap below Cover blocks. The side
   gutters come from .fbc-section. */
.single-content .wp-block-cover.fbc-page-banner {
	margin: 0;
	padding-top: 56px;
	padding-bottom: 56px;
	text-align: center;
}

.single-content .fbc-page-banner .wp-block-cover__inner-container > * {
	margin-top: 0;
	margin-bottom: 20px;
}

.single-content .fbc-page-banner .wp-block-cover__inner-container > *:last-child {
	margin-bottom: 0;
}

/* --- Results: Slam Club / 70% Club buttons ---------------------------------
   .fbc-honours: the row of gold buttons just under the page banner (gold
   colour set on each button). Sets the gap under the banner, between the
   buttons, and a smaller gap before the next section. */
.fbc-honours {
	padding-top: 40px;
}

.single-content .fbc-honours .wp-block-buttons {
	gap: 16px;
	margin: 0;
}

.fbc-honours + .fbc-pad-top {
	padding-top: 48px;
}

/* --- Results: Latest results ----------------------------------------------
   .fbc-results-latest: the light panel with the button to the results site
   (also .fbc-panel .fbc-cta; colour, corners and padding set on the block).
   Even 24px spacing between heading, text, button and the small note.
   A future live results feed can replace this whole panel. */
.single-content .fbc-results-latest .wp-block-group__inner-container > * {
	margin: 0 0 24px;
}

.single-content .fbc-results-latest .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* --- Gallery: Recent photos ticker ----------------------------------------
   .fbc-montage: the box; .fbc-montage-list: the strip of photos built by
   fbc_child_montage_render() in functions.php (two identical halves). The
   strip slides left by one half, then starts again, so it loops seamlessly
   in one direction; its duration is set by the code (about 4s per photo).
   It pauses on hover, touch or keyboard focus. With reduced motion it stays
   still, the repeated copies (.fbc-montage-copy) are hidden and the photos
   can be swiped sideways. */
.fbc-montage {
	overflow: hidden;
	border-radius: 20px;
}

.single-content .fbc-montage-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: fbc-montage-ticker var(--fbc-montage-duration, 60s) linear infinite;
}

.single-content .fbc-montage-list > li {
	flex: none;
	margin: 0;
	padding-right: 0;
}

.fbc-montage:hover .fbc-montage-list,
.fbc-montage:active .fbc-montage-list,
.fbc-montage:focus-within .fbc-montage-list {
	animation-play-state: paused;
}

.fbc-montage-list img {
	display: block;
	width: auto;
	height: 220px;
	border-radius: 12px;
	object-fit: cover;
}

/* Slide by one half plus half a gap, so the join between halves matches the
   gap between photos. */
@keyframes fbc-montage-ticker {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-50% - 6px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbc-montage {
		overflow-x: auto;
	}

	.single-content .fbc-montage-list {
		animation: none;
	}

	.fbc-montage-copy {
		display: none;
	}
}

/* .fbc-back-link: "← Back to Gallery" above an album's title (added by
   fbc_child_gallery_back_link() in functions.php). */
.fbc-back-link {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}

.fbc-back-link a {
	color: var(--global-palette2);
	text-decoration: none;
}

.fbc-back-link a:hover {
	text-decoration: underline;
}

/* --- Gallery: album cards --------------------------------------------------
   .fbc-album-list: the Query Loop's Post Template (3-column grid set on the
   block; 2 on tablets, 1 on phones below). .fbc-album: each card (also
   .fbc-card): the cover photo fills the top edge to edge, with the album
   name and date below (.fbc-album-text, padding set on the block). */
.single-content .fbc-album-list {
	margin: 0;
	padding: 0;
	gap: 24px;
}

.fbc-card.fbc-album {
	gap: 0;
	overflow: hidden; /* clips the photo to the card's rounded corners */
}

.single-content .fbc-album .wp-block-post-featured-image {
	margin: 0;
}

.fbc-album .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

.single-content .fbc-album-text > * {
	margin: 0;
}

.single-content .fbc-albums-query .wp-block-query-pagination {
	margin-top: 32px;
}

/* --- Trophies --------------------------------------------------------------
   The Trophies page lists its child pages with the Gallery album cards
   (.fbc-album-list / .fbc-album). Each trophy page: .fbc-trophy-intro (photo
   and "About this trophy", a .fbc-split Columns block) and .fbc-winners, the
   Year | Winner(s) table (also .fbc-session-table .fbc-officers for the bold
   first column and row dividers). This adds the header row and a narrow
   year column. */
.fbc-trophy-intro .wp-block-image img {
	border-radius: 20px;
}

.single-content .fbc-trophy-intro .fbc-back-link {
	margin-bottom: 24px;
}

figure.wp-block-table.fbc-session-table.fbc-officers.fbc-winners th {
	padding: 12px 16px 12px 0;
	text-align: left;
	font-weight: 700;
	color: var(--global-palette3);
	border-bottom: 2px solid var(--global-palette3);
}

figure.wp-block-table.fbc-session-table.fbc-officers.fbc-winners th:first-child {
	width: 5.5em;
}

figure.wp-block-table.fbc-session-table.fbc-officers.fbc-winners tbody tr:first-child td {
	border-top: 0;
}

/* --- Header: menu highlight for pages inside a dropdown --------------------
   Kadence only highlights the exact current page. When the current page is
   inside a dropdown (e.g. Trophies, or a trophy page, under Club), also
   highlight the top-bar item it sits under, and the dropdown entry it
   belongs to, on desktop and in the mobile menu. */
.main-navigation .primary-menu-container > ul > li.menu-item:has(> ul .current-menu-item, > ul .current-page-ancestor) > a {
	color: var(--global-palette3);
}

.header-navigation .header-menu-container ul ul li.menu-item.current-page-ancestor > a {
	color: var(--global-palette9);
	background: var(--global-palette4);
}

.mobile-navigation ul li.menu-item-has-children:has(> ul .current-menu-item, > ul .current-page-ancestor) > .drawer-nav-drop-wrap,
.mobile-navigation ul li.current-page-ancestor > a {
	color: var(--global-palette-highlight);
}

/* --- Header: room for the menu on small laptops and tablets in landscape ----
   Between 1025px (where Kadence switches from the mobile to the desktop
   header) and 1160px, the logo, title, menu and Programme Book button don't
   all fit on one line (they need about 1130px; 1160px leaves a safety margin). Hide the "Franklin Bridge Club" title text there;
   the logo stays (its alt text names the club). */
@media (min-width: 1025px) and (max-width: 1160px) {
	#main-header .site-branding .site-title-wrap {
		display: none;
	}
}

/* --- Home: hero ------------------------------------------------------------
   .fbc-hero: centred hero section with an even 22px rhythm between items. */
.fbc-hero {
	padding-top: 64px;
	text-align: center;
}

.single-content .fbc-hero > .wp-block-group__inner-container > * {
	margin-top: 0;
	margin-bottom: 22px;
}

.single-content .fbc-hero > .wp-block-group__inner-container > *:last-child {
	margin-bottom: 0;
}

/* .fbc-hero-title: the big H1. Block font sizes can't change per screen size. */
h1.fbc-hero-title {
	font-size: 84px;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* .fbc-hero-intro: keeps the intro paragraph to a readable line length. */
.fbc-hero .fbc-hero-intro {
	max-width: 760px;
}

/* .fbc-hero-buttons: small extra space above the buttons, as in the design. */
.single-content .fbc-hero-buttons {
	padding-top: 6px;
	gap: 14px;
}

/* --- Home: photo mosaic ----------------------------------------------------
   .fbc-mosaic: the section. .fbc-mosaic-grid: its Columns block.
   .fbc-mosaic-main: the left column (large photo). .fbc-mosaic-small: the
   2x2 grid Group on the right. Photo crop and corners are set on each Image
   block; this CSS only sets the 16px gaps (block gap settings are switched
   off by the theme) and makes the large photo match the height of the grid. */
.fbc-mosaic {
	padding-top: 56px;
}

.single-content .fbc-mosaic-grid {
	gap: 16px;
	margin-bottom: 0;
}

.fbc-mosaic-small {
	gap: 16px;
}

.single-content .fbc-mosaic figure.wp-block-image {
	margin: 0;
}

.fbc-mosaic figure.wp-block-image img {
	display: block;
	width: 100%;
}

/* Side by side (core Columns stack below 782px): stretch the large photo. */
@media (min-width: 782px) {
	.fbc-mosaic-main figure.wp-block-image {
		height: 100%;
	}

	.fbc-mosaic-main figure.wp-block-image img {
		height: 100%;
	}
}

/* --- Section headings ------------------------------------------------------
   .fbc-section-title: an H2 that opens a section; tighter than the theme's
   default heading margins and line height. */
.single-content h2.fbc-section-title {
	margin: 0 0 32px;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* --- Home: What's on ------------------------------------------------------
   .fbc-whats-on: the section. .fbc-cards: its three-column Columns block. */
.fbc-whats-on {
	padding-top: 96px;
	padding-bottom: 96px;
}

.single-content .fbc-cards {
	gap: 24px;
	margin-bottom: 0;
}

/* --- Cards (also used by the "FBC" block patterns) -------------------------
   .fbc-card: a Group (Stack layout) with its own colour, corners and padding
   set on the block. This CSS fills the column height, spaces the contents
   evenly and pins the last link (.fbc-card-link) to the bottom of the card. */
.fbc-card {
	height: 100%;
	gap: 16px;
}

.single-content .fbc-card > * {
	margin: 0;
}

.single-content .fbc-card > .fbc-card-link {
	margin-top: auto;
}

.fbc-card-link a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* .fbc-session-table: the session times Table block, without borders.
   Day names are bold; times sit on the right (set per cell in the block).
   The extra "figure.wp-block-table" makes these rules beat Kadence's table
   borders in the editor as well as on the front end. */
figure.wp-block-table.fbc-session-table table,
figure.wp-block-table.fbc-session-table td,
figure.wp-block-table.fbc-session-table th {
	border: 0;
}

figure.wp-block-table.fbc-session-table td,
figure.wp-block-table.fbc-session-table th {
	padding: 6px 0;
}

figure.wp-block-table.fbc-session-table td:first-child {
	font-weight: 700;
}

/* --- Home: About + charity -------------------------------------------------
   .fbc-panel: the light rounded panel (Group; colour, corners and padding set
   on the block). .fbc-about-cols: its two columns (60/40 widths set on the
   blocks). The charity box reuses .fbc-card. */
.single-content .fbc-about-cols {
	gap: 64px;
	margin-bottom: 0;
}

.single-content .fbc-about-cols h2.fbc-section-title {
	margin-bottom: 18px;
}

.single-content .fbc-about-cols p {
	margin-bottom: 0;
}

/* --- Home: Find us ---------------------------------------------------------
   .fbc-find-us: the section. .fbc-find-us-cols: its two columns.
   .fbc-find-us-details: the left column (address, contact details, button),
   spaced 20px apart. .fbc-map: the Kadence Google Maps block on the right
   (its 340px / 240px phone heights are set on the block). */
.fbc-find-us {
	padding-top: 96px;
	padding-bottom: 96px;
}

.single-content .fbc-find-us-cols {
	gap: 48px;
	margin-bottom: 0;
}

.single-content .fbc-find-us-details > * {
	margin-top: 0;
	margin-bottom: 20px;
}

.single-content .fbc-find-us-details > *:last-child {
	margin-bottom: 0;
}

/* Rounded corners: the map block has no border radius setting. */
.fbc-map {
	border-radius: 20px;
	overflow: hidden;
}

.single-content .fbc-map {
	margin: 0;
}

@media all and (max-width: 1024px) {
	h1.fbc-hero-title {
		font-size: 56px;
	}

	.single-content .fbc-fact-grid,
	.single-content .fbc-lesson-list,
	.single-content .fbc-album-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media all and (max-width: 767px) {
	.fbc-pad-top {
		padding-top: 56px;
	}

	.fbc-pad-bottom {
		padding-bottom: 56px;
	}

	.single-content .fbc-split {
		gap: 32px;
	}

	.single-content .fbc-tournament-list {
		grid-template-columns: 1fr; /* one card per row on phones */
	}

	.fbc-hero {
		padding-top: 40px;
	}

	.fbc-montage-list img {
		height: 160px;
	}

	.single-content .wp-block-cover.fbc-page-banner {
		min-height: 220px !important; /* overrides the block's 320px on phones */
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.fbc-mosaic {
		padding-top: 40px;
	}

	.fbc-whats-on {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.single-content h2.fbc-section-title {
		margin-bottom: 24px;
	}

	.fbc-card {
		padding: 24px !important; /* overrides the block's 32px on phones */
	}

	.fbc-panel {
		padding: 32px 24px !important; /* overrides the block's 64px on phones */
	}

	.single-content .fbc-about-cols,
	.single-content .fbc-find-us-cols {
		gap: 32px;
	}

	.fbc-find-us {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	/* Find us contact details (Home and Contact, synced pattern): 18px
	   instead of the block's 20px, so secretary@franklinbridgeclub.com fits
	   on one line on 360px phones and wider. On narrower screens the address
	   may break across lines rather than push the page sideways. */
	.single-content .fbc-find-us-details > p {
		font-size: 18px !important;
		overflow-wrap: anywhere;
	}

	.fbc-mosaic-grid,
	.fbc-mosaic-small {
		gap: 10px !important;
	}

	h1.fbc-hero-title {
		font-size: 40px;
	}

	.fbc-hero-intro {
		font-size: 19px !important; /* overrides the block's 21px on phones */
	}

	.single-content .fbc-fact-grid,
	.single-content .fbc-lesson-list,
	.single-content .fbc-album-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}