/**
 * Jaycess — responsive layout system (all devices).
 * Loaded after main.css; overrides and fills breakpoint gaps.
 */

/* --------------------------------------------------------------------------
   Global: overflow, safe areas, fluid spacing
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: clip;
	scroll-behavior: smooth;
}

body {
	overflow-x: clip;
}

.site,
#content.site-content {
	overflow-x: clip;
	max-width: 100%;
}

.site-header {
	padding-left: env(safe-area-inset-left, 0);
	padding-right: env(safe-area-inset-right, 0);
}

.site-footer,
.scroll-to-top {
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.scroll-to-top {
	right: max(1rem, env(safe-area-inset-right, 0));
	bottom: max(1rem, env(safe-area-inset-bottom, 0));
}

:root {
	--page-gutter: clamp(0.875rem, 3.2vw, 1.5rem);
	--section-padding-block: clamp(2.5rem, 6vw, 5rem);
}

.section-padding {
	padding-top: var(--section-padding-block);
	padding-bottom: var(--section-padding-block);
}

.content-container {
	width: min(92%, calc(100% - 2 * var(--page-gutter)));
	padding-inline: var(--page-gutter);
}

/* Block editor full-bleed blocks — prevent 100vw horizontal scroll */
.alignwide,
.alignfull {
	max-width: 100%;
}

@media (max-width: 782px) {
	.alignwide,
	.alignfull {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Fluid type on small screens */
@media (max-width: 480px) {
	h1 { font-size: clamp(1.65rem, 7vw, 2.25rem); }
	h2 { font-size: clamp(1.4rem, 5.5vw, 1.85rem); }
	h3 { font-size: clamp(1.2rem, 4.5vw, 1.5rem); }

	.site-content {
		padding-top: clamp(1.5rem, 4vw, 3rem);
		padding-bottom: clamp(1.5rem, 4vw, 3rem);
	}
}

/* Touch-friendly controls */
@media (hover: none) and (pointer: coarse) {
	.menu-toggle,
	.header-search-toggle,
	.header-donate-btn,
	.board-scroll-btn,
	.news-scroll-btn,
	.slider-dots .dot,
	.footer-newsletter-submit,
	.jci-gallery-filter,
	.jci-gallery-page-layout-btn,
	.jci-blog-page-layout-btn {
		min-height: 44px;
		min-width: 44px;
	}
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.header-inner {
		width: 100%;
		padding-inline: var(--page-gutter);
	}

	.site-branding .custom-logo,
	.header-logo-link .custom-logo {
		max-height: 56px;
	}

	.header-nav-pill {
		gap: 0.65rem;
		padding: 0.65rem 0.85rem;
		min-height: auto;
	}

	.header-nav-actions {
		gap: 0.25rem;
	}

	.header-donate-btn span {
		display: none;
	}

	.header-donate-btn {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}

	.header-donate-btn i {
		margin: 0;
	}

	.header-search-panel .search-form {
		flex-direction: column;
		max-width: none;
		width: 100%;
		padding-inline: var(--page-gutter);
	}

	.header-search-panel .search-submit {
		width: 100%;
	}

	/* Mobile submenu: expand on .focus / tap */
	.main-navigation .menu-item-has-children > ul {
		display: none;
	}

	.main-navigation .menu-item-has-children.focus > ul {
		display: flex;
	}
}

@media (max-width: 480px) {
	.header-top-bar .header-inner {
		justify-content: center;
	}

	.header-nav-bar {
		padding-inline: var(--page-gutter);
	}

	.header-nav-bar .header-inner {
		padding-inline: 0;
	}
}

body.jaycess-nav-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.slide-item .content-container {
		padding-inline: var(--page-gutter);
	}

	.slide-title {
		font-size: clamp(1.75rem, 7vw, 2.5rem);
	}

	.slide-desc {
		font-size: 1rem;
		max-width: none;
	}

	.slide-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 320px;
		margin-inline: auto;
	}

	.slide-buttons .button,
	.slide-buttons a {
		text-align: center;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.jci-hero-slider {
		--hero-slider-min-height: 360px;
		--hero-slider-height: clamp(360px, 52vh, 480px);
	}

	.slider-dots {
		bottom: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Section headers & badges
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.jci-home-section-title,
	.section-badge {
		font-size: clamp(1.35rem, 5vw, 1.75rem);
	}

	.section-badge::before,
	.section-badge::after {
		display: none;
	}

	.section-header-flex {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.board-title-hearts {
		display: none;
	}

	.board-section-subtitle,
	.news-section-subtitle,
	.pres-letter-section-subtitle {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		font-size: 0.875rem;
	}
}

/* --------------------------------------------------------------------------
   President letter
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
	.pres-section-tabs {
		width: 100%;
	}

	.pres-section-tab {
		flex: 1 1 calc(50% - 0.5rem);
		text-align: center;
		padding-inline: 0.75rem;
	}

	.pres-letter-controls {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Direction, events, pride
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.direction-card,
	.pride-card {
		padding: clamp(1.5rem, 4vw, 2.5rem);
	}

	.event-title {
		height: auto;
		min-height: 2.7em;
	}
}

@media (max-width: 480px) {
	.events-grid {
		gap: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Homepage gallery mosaic
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.jci-gallery-header {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		text-align: center;
	}

	.jci-gallery-filters,
	.jci-gallery-page-toolbar {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
	}

	.jci-gallery-page-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.jci-gallery-filter {
		flex: 1 1 auto;
		text-align: center;
		min-width: min(100%, 140px);
	}
}

/* --------------------------------------------------------------------------
   Board & news carousels
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.board-carousel-wrap {
		width: 100%;
		max-width: 100%;
		padding-inline: var(--page-gutter);
	}

	.jci-board-section .content-container,
	.jci-news-section .content-container {
		width: 100%;
		padding-inline: var(--page-gutter);
	}

	.news-carousel-wrap {
		width: 100%;
		padding-inline: var(--page-gutter);
	}
}

@media (max-width: 767px) {
	.news-section-header--with-action {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.news-section-header--with-action .news-section-header__text {
		text-align: center;
	}

	.jci-news-view-all {
		width: 100%;
		max-width: 280px;
		text-align: center;
		white-space: normal;
	}
}

@media (max-width: 480px) {
	:root {
		--news-card-image-height: 150px;
	}

	.board-scroll-btn,
	.news-scroll-btn {
		display: none;
	}

	.board-scroll,
	.news-scroll {
		scroll-padding-inline: var(--page-gutter);
	}

	.jci-board-decor {
		opacity: 0.55;
	}

	.jci-board-decor__shape--back,
	.jci-board-decor__shape--front {
		display: none;
	}
}

/* Slightly narrower board cards on medium desktops */
@media (max-width: 1200px) and (min-width: 993px) {
	:root {
		--board-card-width: min(252px, calc((100vw - 7rem) / 4));
		--board-carousel-max-width: min(100%, calc(var(--board-card-width) * 4 + var(--board-card-gap) * 3 + 5.5rem));
	}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
	.site-footer .site-footer-container,
	.footer-bar-inner {
		width: 100%;
		padding-inline: var(--page-gutter);
	}

	.footer-newsletter-form {
		flex-direction: column;
		align-items: stretch;
		min-width: 0;
	}

	.footer-newsletter-submit {
		width: 100%;
		border-radius: 999px;
		height: 48px;
	}

	.footer-copyright {
		font-size: 0.8rem;
		line-height: 1.5;
		padding-inline: 0.5rem;
	}

	.footer-copyright-sep {
		display: inline-block;
	}
}

/* --------------------------------------------------------------------------
   Inner pages: contact, gallery, blog, single
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.jci-page-hero {
		padding-top: calc(var(--header-height, 100px) + 1.5rem);
		padding-bottom: 2rem;
	}

	.jci-page-hero__lead {
		font-size: 1rem;
		padding-inline: var(--page-gutter);
	}

	.jci-contact-card-wrap {
		margin-top: -2.5rem;
		padding-inline: var(--page-gutter);
	}

	.jci-contact-card__grid {
		grid-template-columns: 1fr;
	}

	.jci-contact-map iframe {
		min-height: 240px;
	}
}

@media (max-width: 640px) {
	.jci-gallery-page-hero__inner,
	.jci-blog-page-hero__inner,
	.jci-contact-hero__inner,
	.jci-single-post-hero__inner {
		padding-inline: var(--page-gutter);
	}

	.jci-gallery-page-body,
	.jci-blog-page-body {
		padding-inline: var(--page-gutter);
	}

	.jci-gallery-page-layout-switch,
	.jci-blog-page-layout-switch {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
		width: 100%;
	}

	.jci-gallery-page-layout-btn,
	.jci-blog-page-layout-btn {
		flex: 1 1 calc(50% - 0.35rem);
		min-width: 0;
		font-size: 0.75rem;
		padding: 0.5rem 0.35rem;
	}
}

@media (max-width: 480px) {
	.jci-single-post-article__content {
		font-size: 1rem;
	}

	.jci-single-post-hero__meta {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}
}

/* Lightbox: full viewport on phones */
@media (max-width: 640px) {
	.jci-gallery-lightbox {
		max-width: 100vw;
		width: 100%;
		height: 100%;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.jci-gallery-lightbox__figure img {
		max-height: 70dvh;
	}

	.jci-gallery-lightbox__close {
		top: max(0.75rem, env(safe-area-inset-top, 0));
		right: max(0.75rem, env(safe-area-inset-right, 0));
	}
}

/* Homepage: sections handle their own spacing */
.site-main.jci-homepage {
	padding: 0;
	margin: 0;
}

.site-content:has(.jci-homepage) {
	padding-top: 0;
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Admin (JCI dashboard)
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
	.jci-admin-hub__grid {
		grid-template-columns: 1fr;
	}

	.jci-admin-hub {
		padding-inline: var(--page-gutter);
	}

	.jci-media-kit-admin__layout {
		padding-inline: 0;
	}

	.jci-media-kit-admin .submit .button-hero {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 600px) {
	.jci-gallery-admin__workspace {
		grid-template-columns: 1fr !important;
	}

	.jci-gallery-layout-picker {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Full-site responsive audit — homepage sections & inner pages
   ========================================================================== */

/* Prevent horizontal scroll from carousels / decor */
.jci-hero-slider,
.jci-pride-section,
.jci-president-section,
.jci-direction-section,
.jci-events-section,
.jci-gallery-section,
.jci-sponsors-section,
.jci-news-section,
.jci-board-section,
.jci-section-transition {
	overflow-x: clip;
	max-width: 100%;
}

.jci-president-section .content-container,
.jci-board-section .content-container,
.news-carousel-wrap {
	max-width: 100%;
}

/* Fluid carousel tokens */
@media (max-width: 992px) {
	:root {
		--board-card-width: min(240px, calc((100vw - 4rem) / 2.2));
		--board-carousel-max-width: 100%;
		--news-card-image-height: 160px;
	}

	.board-carousel-wrap,
	.news-carousel-wrap {
		width: 100%;
		max-width: 100%;
	}

	.board-slider,
	.news-slider {
		margin-inline: 0;
	}

	.footer-newsletter {
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
	}

	.footer-newsletter-text {
		max-width: none;
	}

	.footer-newsletter-form {
		min-width: 0;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	:root {
		--board-card-width: min(220px, 78vw);
	}

	.slide-desc {
		margin-inline: auto;
	}

	.slider-arrow.prev {
		left: max(0.5rem, env(safe-area-inset-left, 0));
	}

	.slider-arrow.next {
		right: max(0.5rem, env(safe-area-inset-right, 0));
	}

	.jci-president-section .content-container {
		width: 100%;
	}

	.pres-letter-section-header {
		margin-bottom: 2rem;
		padding-inline: 0;
	}

	.direction-card {
		padding: clamp(1.25rem, 4vw, 2rem);
	}

	.dir-title {
		font-size: clamp(1.15rem, 4vw, 1.35rem);
	}

	.jci-events-carousel-wrap {
		padding-inline: 0;
	}

	.jci-events-scroll {
		scroll-padding-inline: var(--page-gutter);
	}

	.jci-gallery-stage {
		padding-inline: 0;
	}

	.jci-sponsors-block--static .jci-sponsors-block__track,
	.jci-sponsors-block--slider .jci-sponsors-block__track.is-static-motion {
		padding-inline: var(--page-gutter);
	}

	.jci-board-view-all .btn-small-outline,
	.jci-events-view-all .btn-small-outline {
		width: 100%;
		max-width: 280px;
	}
}

@media (max-width: 600px) {
	.jci-gallery-mosaic {
		grid-auto-rows: minmax(88px, 22vw);
		gap: 0.65rem;
	}

	.jci-gallery-item__title {
		font-size: 0.82rem;
	}

	.jci-gallery-item--spotlight,
	.jci-gallery-item--zone-spotlight {
		max-height: min(320px, 50vh);
	}

	.jci-gallery-stage--single .jci-gallery-item--spotlight,
	.jci-gallery-stage--single .jci-gallery-item--zone-spotlight {
		max-height: min(280px, 45vh);
	}
}

@media (max-width: 480px) {
	:root {
		--board-card-width: min(200px, 86vw);
	}

	.slide-buttons {
		max-width: none;
	}

	.pride-card .card-title {
		font-size: clamp(1.2rem, 5vw, 1.5rem);
	}

	.pride-card .card-text {
		font-size: 0.98rem;
	}

	.pres-letter__portrait img,
	.pres-letter__portrait-fallback,
	.pres-letter__photo-panel--frame-full .pres-letter__portrait img,
	.pres-letter__photo-panel--frame-full .pres-letter__portrait-fallback {
		min-height: 240px;
	}

	.pres-letter__paper {
		padding: 1.5rem 1.15rem;
	}

	.pres-letter__body {
		font-size: 0.95rem;
	}

	.jci-event-slide {
		flex: 0 0 calc(100vw - 2 * var(--page-gutter) - 0.5rem);
		width: calc(100vw - 2 * var(--page-gutter) - 0.5rem);
	}

	.jci-event-countdown {
		justify-content: center;
	}

	.jci-event-countdown__digit {
		min-width: 1.75rem;
		height: 2.25rem;
		font-size: 1.1rem;
	}

	.jci-gallery-item--zone-strip {
		flex: 0 0 min(160px, 42vw);
		width: min(160px, 42vw);
		height: min(120px, 28vw);
	}

	.jci-sponsor-item {
		min-width: min(130px, 38vw);
		max-width: min(160px, 44vw);
	}

	.jci-sponsors-block__intro {
		padding-inline: var(--page-gutter);
	}

	.board-section-header,
	.news-section-header {
		margin-bottom: 2rem;
		padding-inline: 0.25rem;
	}

	.jci-board-decor {
		right: -8%;
	}
}

/* News cards when container queries are unsupported */
@supports not (width: 1cqw) {
	@media (max-width: 992px) {
		.news-card {
			flex: 0 0 min(280px, 72vw);
			width: min(280px, 72vw);
		}
	}

	@media (max-width: 480px) {
		.news-card {
			flex: 0 0 min(260px, 86vw);
			width: min(260px, 86vw);
		}
	}
}

/* --------------------------------------------------------------------------
   Inner pages: board, projects, about, contact
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
	.jci-page-hero__title {
		font-size: clamp(1.75rem, 5vw, 2.5rem);
	}

	.jci-board-page-hero__inner,
	.jci-board-page-body__inner {
		padding-inline: var(--page-gutter);
	}

	.jci-board-org__row--grid {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	}
}

@media (max-width: 768px) {
	.jci-projects-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.jci-projects-page-hero__inner,
	.jci-projects-page-body {
		padding-inline: var(--page-gutter);
	}

	.jci-board-page--layout-list.jci-board-page--cards-horizontal .jci-board-org-card__shell {
		flex-direction: column;
	}

	.jci-board-page--layout-list.jci-board-page--cards-horizontal .jci-board-org-card__photo {
		width: 100%;
		max-width: none;
	}

	.jci-contact-hero__inner {
		padding-inline: var(--page-gutter);
	}
}

@media (max-width: 480px) {
	.jci-projects-stats {
		grid-template-columns: 1fr;
	}

	.jci-board-org__level-label {
		font-size: 0.8rem;
	}

	.jci-board-org-card__name {
		font-size: 1rem;
	}

	.jci-board-org-card__contacts {
		font-size: 0.82rem;
	}

	.jci-page-hero {
		padding-bottom: 1.5rem;
	}
}

/* WordPress content: tables & pre blocks on small screens */
@media (max-width: 768px) {
	.entry-content table,
	.jci-single-post-article__content table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.entry-content pre,
	.jci-single-post-article__content pre {
		overflow-x: auto;
		max-width: 100%;
	}
}