/* ==========================================================================
   Photo pages — "Option A" layout (V29, Nov 2026)
   Used by single-photo.php. Enqueued from functions.php on photo pages only.
   Breakpoints follow Bridge: <= 1000px tablet, <= 600px phone.
   ========================================================================== */

/* ---- Page shell ---------------------------------------------------------- */
.ap-photo {
	background: #111111;
	color: #ffffff;
	padding: 48px 0 0; /* the content-bottom widget rows that follow add their own top spacing */
}
/* On desktop Bridge's 85px header overlaps the top of the content
   (.content has margin-top:-85px), so clear it here. */
@media (min-width: 1001px) {
	.ap-photo { padding-top: 137px; }
}
/* Width comes from Bridge's .container_inner (the theme's content-width
   setting and its responsive sizes), so the page lines up with the
   content-bottom widget rows and the rest of the site. */
.ap-photo__inner {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Photo stage --------------------------------------------------------- */
.ap-stage {
	margin: 0;
	text-align: center;
}
.ap-stage > a {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}
/* Shown at real size or smaller, never stretched; never taller than the screen. */
.ap-stage img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80vh;
	margin: 0 auto;
}

/* Gallery slider */
.photo-swiper {
	width: 100%;
	position: relative;
	overflow: hidden;
	--swiper-navigation-color: #ffffff;
	--swiper-navigation-size: 28px;
}
.photo-swiper .swiper-slide {
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.photo-swiper .swiper-slide a {
	display: inline-block;
	max-width: 100%;
}
.photo-swiper .swiper-button-prev,
.photo-swiper .swiper-button-next {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}
.photo-swiper .swiper-pagination {
	position: static;
	margin-top: 14px;
}
.photo-swiper .swiper-pagination-bullet { background: #555555; opacity: 1; }
.photo-swiper .swiper-pagination-bullet-active { background: #ffffff; }
.photo-swiper-video-slide {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.photo-swiper-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Title and description ---------------------------------------------- */
.ap-title {
	margin: 0;
	font-family: 'Novecentowide-Normal', sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.25;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #ffffff;
}
.ap-rule {
	width: 100%;
	height: 1px;
	background: #cc0000;
	margin: 20px 0 24px;
}
.ap-desc p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.7;
	color: #e6e6e6;
}
.ap-desc p:last-child { margin-bottom: 0; }
.ap-desc a { color: #ffffff; text-decoration: underline; }

/* ---- Print details card -------------------------------------------------- */
.ap-details {
	background: #181818;
	border: 1px solid #2a2a2a;
	border-radius: 4px;
	padding: 28px;
	box-sizing: border-box;
}
.ap-label {
	margin: 0 0 16px;
	font-family: 'Novecentowide-Normal', sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #b5b5b5;
}
.ap-details dl {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 14px 16px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}
.ap-details dt {
	margin: 0;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #9a9a9a;
}
.ap-details dd {
	margin: 0;
	color: #ffffff;
	overflow-wrap: anywhere;
}
.ap-details dd a { color: #ffffff; text-decoration: underline; }
.ap-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ap-sizes span {
	border: 1px solid #3a3a3a;
	border-radius: 3px;
	padding: 3px 8px;
	font-size: 12px;
	line-height: 1.4;
}
/* Theme button (.qbutton), full width inside the card.
   Bridge forces box-sizing:initial !important on .qbutton, so fill the card
   with width:auto (a block-level flex box) instead of width:100%. */
.ap-details .qbutton.ap-inquire {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 48px;
	line-height: 48px;
	margin: 26px 0 0;
	padding: 0 23px;
	text-align: center;
}

/* ---- Wide photos: stage on top, text + card side by side below ---------- */
.is-wide .ap-info {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
	margin-top: 48px;
}
.is-wide .ap-info__text { flex: 999 1 520px; min-width: 0; }
.is-wide .ap-details   { flex: 1 1 380px; min-width: 0; }

/* ---- Tall photos ---------------------------------------------------------- */
.is-tall .ap-info {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 36px;
}
/* Desktop: photo left, details right */
@media (min-width: 1001px) {
	.is-tall .ap-photo__top {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr);
		gap: 64px;
		align-items: start;
	}
	.is-tall .ap-info { margin-top: 0; }
	.is-tall .ap-stage img { max-height: calc(100vh - 160px); }
}

/* ---- iPad and smaller ----------------------------------------------------- */
@media (max-width: 1000px) {
	.ap-stage img { max-height: 70vh; }
	/* Tall photos sit centred on a full-width darker band so they don't look lost */
	.is-tall .ap-stage {
		background: #0b0b0b;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 24px 0;
	}
	.ap-title { font-size: 28px; line-height: 1.3; }
	.is-wide .ap-info { gap: 32px; margin-top: 36px; }
	.ap-details dl { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ---- Phone ---------------------------------------------------------------- */
@media (max-width: 600px) {
	/* Photo runs edge to edge */
	.ap-stage,
	.is-tall .ap-stage {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 0;
		background: none;
	}
	.ap-stage img { max-height: 75vh; }
	.ap-title { font-size: 22px; line-height: 1.35; letter-spacing: 1.5px; }
	.ap-rule { margin: 16px 0 18px; }
	.ap-desc p { font-size: 15px; }
	.ap-details { padding: 20px; }
	.ap-details dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.ap-details dd { margin-bottom: 12px; }
	.ap-details .qbutton.ap-inquire { height: 50px; line-height: 50px; }
}

/* ---- Gallery (category) buttons ------------------------------------------ */
.ap-cats {
	margin-top: 40px;
}
/* Extra room under the section titles */
.ap-cats .ap-label,
.ap-related .ap-label,
.ap-label--articles {
	margin-bottom: 31px;
}
.ap-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* wpdocs_custom_taxonomies_terms_links() outputs <span class="qbutton smallest"><a>…</a></span> */
.ap-cats__list .qbutton.smallest {
	display: inline-flex;
	align-items: center;
	height: auto;
	line-height: 1;
	margin: 0;
	padding: 0;
	font-size: 11px;
	letter-spacing: 1.5px;
}
.ap-cats__list .qbutton.smallest a {
	display: block;
	padding: 9px 14px;
	color: #ffffff;
	text-decoration: none;
}
@media (max-width: 1000px) {
	/* Bigger touch targets on tablets and phones */
	.ap-cats__list .qbutton.smallest a { padding: 14px 14px; }
}

/* ---- Related photographs (Contextual Related Posts) ----------------------- */
.ap-related { margin-top: 56px; }
.ap-related .crp_related > div:first-child { display: none; } /* empty spacer CRP prints */
.ap-related .crp_related ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ap-related .crp_related li {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
	border: 0;
	box-shadow: none;
	background: none;
}
.ap-related .crp_related a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
	color: #e6e6e6;
	text-decoration: none;
}
/* Equal-height tiles; each thumbnail keeps its own shape inside */
.ap-related .crp_related figure {
	margin: 0;
	aspect-ratio: 3 / 2;
	background: #161616;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.ap-related .crp_related img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	display: block;
}
.ap-photo .ap-related .crp_related .crp_title { /* beats CRP's own centred caption rule */
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: #e6e6e6;
	white-space: normal;
	text-align: left;
	position: static;
	background: none;
	padding: 0;
}
@media (max-width: 1000px) {
	.ap-related .crp_related ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 600px) {
	.ap-related .crp_related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* ---- Content-bottom widget rows (related posts + text boxes) --------------
   Bridge prints these right after the page content. Give them the page's
   background so they read as part of the same column (photo pages only). */
.single-photo .content_bottom {
	background-color: #111111;
}
/* Row 1 (related articles): 56px above, to match the other sections
   (the widget sets its own padding-top inline). */
.single-photo .content_bottom .textwidget > .vc_row:first-child {
	padding-top: 56px !important;
	padding-bottom: 70px !important;
}
/* The row's leading transparent spacer is replaced by the "Related articles"
   title (added in functions.php), so the title sits 31px above the boxes. */
.single-photo .content_bottom .textwidget > .vc_row:first-child .wpb_wrapper > .separator.transparent:first-child {
	display: none;
}
/* Row 2 (three text boxes): footer colour, starting halfway through the
   gap, so the photo page ends and the footer content begins. */
.single-photo .content_bottom .textwidget > .vc_row:nth-child(2) {
	background-color: #222222;
	padding-top: 70px !important;
}

/* ---- Hidden crawler links and the inquiry form ---------------------------- */
.the-category-nav { display: none; }
#inquire-form-section {
	background: #111111;
	border-top: 1px solid #2a2a2a;
	padding: 40px 20px;
}
/* Same width as the rest of the layout (the template adds .container_inner) */
.ap-inquire-form {
	float: none;
	margin-left: auto;
	margin-right: auto;
}
/* Inquiry form (Gravity Forms #1): First name, Last name, Email and Phone
   in two equal columns; Message full width. */
#inquire-form-section .gform_wrapper.gravity-theme .gform_fields {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 24px;
}
#inquire-form-section .gform_wrapper.gravity-theme .gfield {
	grid-column: 1 / -1;
	width: auto;      /* overrides fixed field widths in style.css (e.g. the Phone field) */
	max-width: none;
}
#inquire-form-section .gform_wrapper.gravity-theme .ginput_container {
	width: 100%;
}
#inquire-form-section .gform_wrapper.gravity-theme #field_1_7,
#inquire-form-section .gform_wrapper.gravity-theme #field_1_8,
#inquire-form-section .gform_wrapper.gravity-theme #field_1_2,
#inquire-form-section .gform_wrapper.gravity-theme #field_1_3 {
	grid-column: span 1;
}
#inquire-form-section .gform_wrapper.gravity-theme .gfield.spacer {
	display: none;
}
#inquire-form-section .gform_wrapper.gravity-theme .gfield input:not([type="checkbox"]):not([type="radio"]),
#inquire-form-section .gform_wrapper.gravity-theme .gfield textarea {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	#inquire-form-section .gform_wrapper.gravity-theme .gform_fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Widget Options alignment (its stylesheet is removed on photo pages) ---
   Copied from the Extended Widget Options plugin's widget-options.css. */
@media screen and (min-width: 1181px) {
	body .extendedwopts-md-center { text-align: center; }
}
@media screen and (max-width: 1024px) and (orientation: portrait),
       screen and (max-width: 1180px) and (orientation: landscape) {
	body .extendedwopts-sm-center { text-align: center; }
}
@media screen and (max-width: 991px) and (orientation: landscape) {
	body .extendedwopts-xs-center { text-align: center; }
}