/**
 * Photo Express.
 *
 * Two independent halves:
 *
 *   PART 1  the admin screen at Appearance > Photo Express. Leans on the core
 *           admin classes (.wrap, .widefat, .striped, .button, .description)
 *           and only adds the spacing they do not cover.
 *
 *   PART 2  the front-end effects. Every rule here is keyed off a body class
 *           printed by smokedmeat_rye_photo_body_class(), so a slot whose
 *           settings are untouched contributes nothing and cannot fight
 *           css/appearance.css. Values come from the custom properties printed
 *           by smokedmeat_rye_photo_css().
 *
 * Note on --smr-photo-*-opacity: it is the transparency amount, 0 to 1, in the
 * same sense as --smr-hero-overlay. 0 leaves the photo alone; higher values
 * fade it further. Background slots use it as the alpha of a black veil, the
 * About slot as 1 minus the image's own opacity.
 */

/* =========================================================================
 * PART 1 — admin screen
 * ====================================================================== */

.smr-photo-wrap .smr-photo-intro {
	max-width: 900px;
}

.smr-photo-table {
	max-width: 1200px;
	margin-bottom: 12px;
}

.smr-photo-table td {
	vertical-align: top;
	padding-top: 14px;
	padding-bottom: 18px;
}

.smr-photo-col-thumb {
	width: 190px;
}

.smr-photo-col-settings {
	width: 42%;
}

/* ----- thumbnail and its empty state ----- */
.smr-photo-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 100px;
	overflow: hidden;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
}

.smr-photo-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.smr-photo-empty {
	padding: 0 10px;
	color: #8c8f94;
	font-size: 12px;
	font-style: italic;
	text-align: center;
}

/* ----- slot column ----- */
.smr-photo-size {
	margin: 8px 0 4px;
}

.smr-photo-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 10px 0 4px;
}

.smr-photo-reset {
	color: #b32d2e;
}

.smr-photo-reset:hover,
.smr-photo-reset:focus {
	color: #8a2424;
}

.smr-photo-url {
	margin: 4px 0 0;
	overflow-wrap: anywhere;
}

.smr-photo-url code {
	font-size: 11px;
}

/* ----- setting groups ----- */
.smr-photo-group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
	padding-bottom: 12px;
}

.smr-photo-group--piping {
	margin-top: 12px;
	padding-top: 12px;
	padding-bottom: 0;
	border-top: 1px solid #f0f0f1;
}

.smr-photo-field {
	flex: 1 1 190px;
	min-width: 170px;
}

.smr-photo-field > label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.smr-photo-field--bool {
	flex-basis: 100%;
}

.smr-photo-field--bool > label {
	font-weight: 600;
}

.smr-photo-field--bool input {
	margin-right: 4px;
}

.smr-photo-field input[type="range"] {
	width: calc(100% - 46px);
	vertical-align: middle;
}

.smr-photo-field input[type="number"] {
	width: 80px;
}

.smr-photo-field input[type="color"] {
	width: 60px;
	height: 30px;
	padding: 2px;
	vertical-align: middle;
}

.smr-photo-field select {
	max-width: 100%;
}

.smr-photo-output {
	display: inline-block;
	min-width: 34px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	vertical-align: middle;
}

.smr-photo-field .description {
	margin: 4px 0 0;
	font-size: 12px;
}

.smr-photo-changelog {
	margin: 0 0 10px 18px;
	list-style: disc;
}

@media screen and (max-width: 782px) {
	.smr-photo-table,
	.smr-photo-table tbody,
	.smr-photo-table tr,
	.smr-photo-table td {
		display: block;
		width: auto;
	}

	.smr-photo-table thead {
		display: none;
	}

	.smr-photo-table tr {
		padding-bottom: 10px;
	}
}

/* =========================================================================
 * PART 2 — front-end effects
 *
 * Hero slides are matched by position, because front-page.php only prints the
 * slides that are filled in. Filling the slides in order — which is what the
 * Customizer and Photo Express both encourage — keeps slot N on slide N.
 * The Classic homepage template reuses .hero-slide for its own banner, so it is
 * excluded from the hero rules and handled by the home2 block instead.
 * ====================================================================== */

/* ----- hero slide 1 ----- */
body.smr-photo-hero-1-veil:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(1)::before {
	background: rgba(0, 0, 0, var(--smr-photo-hero-1-opacity, 0));
}

body.smr-photo-hero-1-contain:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(1) {
	background-size: var(--smr-photo-hero-1-fit, cover);
	background-repeat: no-repeat;
}

body.smr-photo-hero-1-focal:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(1) {
	background-position: var(--smr-photo-hero-1-position, center);
}

body.smr-photo-hero-1-piping:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(1) {
	box-shadow: inset 0 0 0 var(--smr-photo-hero-1-piping-width, 0) var(--smr-photo-hero-1-piping-color, transparent);
}

/* ----- hero slide 2 ----- */
body.smr-photo-hero-2-veil:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(2)::before {
	background: rgba(0, 0, 0, var(--smr-photo-hero-2-opacity, 0));
}

body.smr-photo-hero-2-contain:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(2) {
	background-size: var(--smr-photo-hero-2-fit, cover);
	background-repeat: no-repeat;
}

body.smr-photo-hero-2-focal:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(2) {
	background-position: var(--smr-photo-hero-2-position, center);
}

body.smr-photo-hero-2-piping:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(2) {
	box-shadow: inset 0 0 0 var(--smr-photo-hero-2-piping-width, 0) var(--smr-photo-hero-2-piping-color, transparent);
}

/* ----- hero slide 3 ----- */
body.smr-photo-hero-3-veil:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(3)::before {
	background: rgba(0, 0, 0, var(--smr-photo-hero-3-opacity, 0));
}

body.smr-photo-hero-3-contain:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(3) {
	background-size: var(--smr-photo-hero-3-fit, cover);
	background-repeat: no-repeat;
}

body.smr-photo-hero-3-focal:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(3) {
	background-position: var(--smr-photo-hero-3-position, center);
}

body.smr-photo-hero-3-piping:not(.page-template-home-2) .hero-slider .hero-slide:nth-of-type(3) {
	box-shadow: inset 0 0 0 var(--smr-photo-hero-3-piping-width, 0) var(--smr-photo-hero-3-piping-color, transparent);
}

/* ----- about section: a real <img>, so object-fit applies ----- */
body.smr-photo-about-veil .about-image img {
	opacity: calc(1 - var(--smr-photo-about-opacity, 0));
}

body.smr-photo-about-contain .about-image img {
	object-fit: var(--smr-photo-about-fit, cover);
}

body.smr-photo-about-focal .about-image img {
	object-fit: var(--smr-photo-about-fit, cover);
	object-position: var(--smr-photo-about-position, center);
}

body.smr-photo-about-piping .about-image img {
	border: var(--smr-photo-about-piping-width, 0) solid var(--smr-photo-about-piping-color, transparent);
}

/* ----- booking form background -----
   front-page.php and inc/home-sections.php print the image, its size and its
   position inline, and an inline style beats a stylesheet. Where a setting is
   explicitly chosen the whole background is restated from the custom
   properties, which is why these three need !important. */
body.smr-photo-reservation-veil .reservation-section {
	background-image:
		linear-gradient(
			rgba(0, 0, 0, var(--smr-photo-reservation-opacity, 0)),
			rgba(0, 0, 0, var(--smr-photo-reservation-opacity, 0))
		),
		var(--smr-photo-reservation-url) !important;
}

body.smr-photo-reservation-contain .reservation-section {
	background-size: var(--smr-photo-reservation-fit, cover) !important;
	background-repeat: no-repeat !important;
}

body.smr-photo-reservation-focal .reservation-section {
	background-position: var(--smr-photo-reservation-position, center) !important;
}

body.smr-photo-reservation-piping .reservation-section {
	box-shadow: inset 0 0 0 var(--smr-photo-reservation-piping-width, 0) var(--smr-photo-reservation-piping-color, transparent);
}

/* ----- Classic homepage banner ----- */
body.smr-photo-home2-veil.page-template-home-2 .hero-slider .hero-slide::before {
	background: rgba(0, 0, 0, var(--smr-photo-home2-opacity, 0));
}

body.smr-photo-home2-contain.page-template-home-2 .hero-slider .hero-slide {
	background-size: var(--smr-photo-home2-fit, cover);
	background-repeat: no-repeat;
}

body.smr-photo-home2-focal.page-template-home-2 .hero-slider .hero-slide {
	background-position: var(--smr-photo-home2-position, center);
}

body.smr-photo-home2-piping.page-template-home-2 .hero-slider .hero-slide {
	box-shadow: inset 0 0 0 var(--smr-photo-home2-piping-width, 0) var(--smr-photo-home2-piping-color, transparent);
}

/* ----- Minimal homepage banner -----
   That banner carries no class of its own, so it is addressed as the first
   section inside the content wrapper on its template, and its inline
   background again has to be restated to be overridden. */
body.smr-photo-home3-veil.page-template-home-3 #content > section:first-of-type {
	background-image:
		linear-gradient(
			rgba(0, 0, 0, var(--smr-photo-home3-opacity, 0)),
			rgba(0, 0, 0, var(--smr-photo-home3-opacity, 0))
		),
		var(--smr-photo-home3-url) !important;
}

body.smr-photo-home3-contain.page-template-home-3 #content > section:first-of-type {
	background-size: var(--smr-photo-home3-fit, cover) !important;
	background-repeat: no-repeat !important;
}

body.smr-photo-home3-focal.page-template-home-3 #content > section:first-of-type {
	background-position: var(--smr-photo-home3-position, center) !important;
}

body.smr-photo-home3-piping.page-template-home-3 #content > section:first-of-type {
	box-shadow: inset 0 0 0 var(--smr-photo-home3-piping-width, 0) var(--smr-photo-home3-piping-color, transparent);
}