/* Slashbook Dogs. Override any of these custom properties in your theme. */
.sbd {
	--sbd-columns: 3;
	--sbd-gap: 24px;
	--sbd-image-height: 240px;
	--sbd-image-bg: #f1f1f1;
	--sbd-name-size: 1.25em;
	--sbd-title-size: 0.85em;
	--sbd-radius: 0;
	--sbd-hover-bg: #3a3a3a;
	--sbd-hover-color: #fff;
	position: relative;
	margin: 1.5em 0;
}

.sbd-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sbd-gap);
	grid-template-columns: repeat(var(--sbd-columns), minmax(0, 1fr));
}

/* Slider: one scroll-snapping row; arrows scroll it (assets/js). */
.sbd--slider .sbd-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.sbd--slider .sbd-track::-webkit-scrollbar { display: none; }
.sbd--slider .sbd-card {
	flex: 0 0 calc((100% - (var(--sbd-columns) - 1) * var(--sbd-gap)) / var(--sbd-columns));
	scroll-snap-align: start;
}

@media (max-width: 900px) {
	.sbd { --sbd-columns: 2 !important; }
}
@media (max-width: 560px) {
	.sbd { --sbd-columns: 1 !important; }
	.sbd--slider .sbd-card { flex-basis: 82%; }
}

.sbd-card { margin: 0; padding: 0; text-align: center; }

/* Themes style every <button> (padding, background, hover colours); the
   plugin's own buttons reset that so they look the same in any theme. */
.sbd .sbd-card__open,
.sbd .sbd-arrow,
.sbd .sbd-dialog__close {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-width: 0;
	min-height: 0;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

/* Card: the whole card is the button that opens the popup */
.sbd .sbd-card__open {
	display: block;
	width: 100%;
	padding: 0 0 1em !important;
	background: transparent !important;
	color: inherit !important;
	text-align: center;
	box-shadow: none;
	box-sizing: border-box;
	border-radius: var(--sbd-radius);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sbd .sbd-card__open:hover,
.sbd .sbd-card__open:focus-visible {
	background: var(--sbd-hover-bg) !important;
	color: var(--sbd-hover-color) !important;
}
.sbd .sbd-card__open:focus-visible { outline: 2px solid var(--sbd-hover-bg); outline-offset: 3px; }
.sbd .sbd-card__open:hover .sbd-card__name,
.sbd .sbd-card__open:hover .sbd-card__title,
.sbd .sbd-card__open:focus-visible .sbd-card__name,
.sbd .sbd-card__open:focus-visible .sbd-card__title { color: var(--sbd-hover-color); }
.sbd .sbd-card__open:hover .sbd-card__divider,
.sbd .sbd-card__open:focus-visible .sbd-card__divider { background: var(--sbd-hover-color); opacity: 1; }

.sbd-card__image {
	display: block;
	position: relative;
	overflow: hidden;
	height: var(--sbd-image-height);
	background: var(--sbd-image-bg);
	border-radius: var(--sbd-radius) var(--sbd-radius) 0 0;
}
.sbd-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center; /* centred both ways */
	transition: transform 0.3s ease;
}
.sbd .sbd-card__open:hover .sbd-card__image img { transform: scale(1.04); }

/* Deferred photos fade in once loaded (assets/js) */
.sbd img.sbd-lazy { opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; }
.sbd img.sbd-lazy.is-loaded { opacity: 1; }

.sbd-card__name {
	display: block;
	margin-top: 0.6em;
	padding: 0 0.5em;
	font-size: var(--sbd-name-size);
	font-weight: 600;
	line-height: 1.3;
	transition: color 0.2s ease;
}
.sbd-card__divider {
	display: block;
	width: 32px;
	height: 2px;
	margin: 0.5em auto;
	background: currentColor;
	opacity: 0.6;
}
.sbd-card__title {
	display: block;
	padding: 0 0.5em;
	font-size: var(--sbd-title-size);
	font-weight: 600;
	line-height: 1.4;
	opacity: 0.85;
	transition: color 0.2s ease;
}

.sbd-card__years {
	display: block;
	margin-bottom: 0.25em;
	font-size: var(--sbd-title-size);
	letter-spacing: 0.05em;
	opacity: 0.75;
}

/* "In memory": softened black-and-white photos, colour on hover/focus */
.sbd--memorial .sbd-card__image img,
.sbd--memorial .sbd-dialog__photo {
	filter: grayscale(1) contrast(0.95);
	transition: filter 0.4s ease, transform 0.3s ease, opacity 0.3s ease;
}
.sbd--memorial .sbd-card__open:hover .sbd-card__image img,
.sbd--memorial .sbd-card__open:focus-visible .sbd-card__image img,
.sbd--memorial .sbd-dialog:hover .sbd-dialog__photo { filter: none; }

/* One dog per row (layout="list"): photo left, story right; stacked on phones */
.sbd--list .sbd-track { display: block; }
.sbd-row {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	text-align: left;
	padding: 28px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.sbd-row:first-child { border-top: 0; padding-top: 0; }
.sbd--list .sbd-row__image {
	flex: 0 0 min(36%, 360px);
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: var(--sbd-radius);
}
.sbd-row__body { flex: 1; min-width: 0; }
.sbd-row__name { margin: 0 0 0.2em; }
.sbd-row__dates { margin: 0 0 0.4em; letter-spacing: 0.04em; opacity: 0.75; }
.sbd-row__title { margin: 0 0 0.4em; font-weight: 600; }
.sbd-row__facts { margin: 0 0 1em; opacity: 0.7; font-size: 0.9em; }
.sbd-row__description p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
	.sbd-row { flex-direction: column; gap: 16px; }
	.sbd--list .sbd-row__image { flex-basis: auto; width: 100%; }
}
.sbd--memorial .sbd-row:hover .sbd-card__image img { filter: none; }
.sbd-dialog__dates { margin: 0 0 0.4em; letter-spacing: 0.04em; opacity: 0.75; }

/* Slider arrows: round, centred on the photos */
.sbd .sbd-arrow {
	position: absolute;
	top: calc(var(--sbd-image-height) / 2);
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #222 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.sbd .sbd-arrow[hidden] { display: none; }
.sbd .sbd-arrow:hover:not([disabled]) {
	background: var(--sbd-hover-bg) !important;
	color: var(--sbd-hover-color) !important;
}
.sbd .sbd-arrow[disabled] { opacity: 0; pointer-events: none; }
.sbd .sbd-arrow svg { display: block; flex: none; }
.sbd .sbd-arrow--prev { left: -22px; }
.sbd .sbd-arrow--next { right: -22px; }
@media (max-width: 700px) {
	.sbd .sbd-arrow--prev { left: 6px; }
	.sbd .sbd-arrow--next { right: 6px; }
}

/* Detail popup (native <dialog>) */
.sbd-dialog {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: 8px;
	overflow: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.sbd-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.sbd .sbd-dialog__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	box-shadow: none;
}
.sbd .sbd-dialog__close:hover { background: rgba(0, 0, 0, 0.8) !important; }
.sbd .sbd-dialog__close svg { display: block; flex: none; }
/* Popup photo: shown whole (portrait phone photos would lose ears and
   paws if cropped to the wide box); a blurred copy fills the sides. */
.sbd-dialog__image {
	position: relative;
	overflow: hidden;
	height: min(70vh, 640px);
	background: #222;
}
.sbd-dialog__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-position: center center;
}
.sbd-dialog__image .sbd-dialog__backdrop {
	object-fit: cover;
	filter: blur(24px) brightness(0.6);
	transform: scale(1.15); /* hide the blur's soft edges */
}
.sbd-dialog__image .sbd-dialog__photo { object-fit: contain; }
.sbd-dialog__body { padding: 20px 24px 24px; }
.sbd-dialog__name { margin: 0 0 0.2em; }
.sbd-dialog__title { margin: 0 0 0.4em; font-weight: 600; }
.sbd-dialog__facts { margin: 0 0 1em; opacity: 0.7; font-size: 0.9em; }
.sbd-dialog__description p:last-child { margin-bottom: 0; }

.sbd-notice { padding: 0.75em 1em; border-left: 4px solid #d63638; background: #fcf0f1; }