/* MiGALLERY front-end. Override any --migal-* variable in Oxygen's global CSS to match the site. */
.migal {
	--migal-accent: #5c1f1b;        /* oxblood */
	--migal-accent-ink: #ffffff;
	--migal-ink: inherit;
	--migal-muted: #5f6368;
	--migal-line: #d6d2cc;
	--migal-field: #ffffff;
	--migal-ok: #1f5c34;
	--migal-err: #8a1c1c;
	--migal-gap: 1.25rem;
	--migal-radius: 4px;
	font-family: inherit;
	color: var(--migal-ink);
	box-sizing: border-box;
}
.migal *, .migal *::before, .migal *::after { box-sizing: inherit; }

/* Button */
.migal-btn {
	display: inline-block;
	padding: .8em 1.4em;
	background: var(--migal-accent);
	color: var(--migal-accent-ink);
	border: 0;
	border-radius: var(--migal-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.migal-btn:hover { filter: brightness(1.15); color: var(--migal-accent-ink); }
.migal-btn:focus-visible { outline: 3px solid var(--migal-accent); outline-offset: 3px; }

/* Call to action section */
.migal-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2.5rem;
	padding: 2rem 2.25rem;
	margin: 0;
	background: #f4f1ed;
	border-left: 6px solid var(--migal-accent);
	border-radius: var(--migal-radius);
	color: #1c1a19;
}
.migal-gallery > .migal-cta:first-child { margin-bottom: 2.5rem; }
.migal-gallery > .migal-cta:last-child { margin-top: 3.5rem; }
.migal-cta-text { flex: 1 1 28rem; max-width: 40rem; }
.migal-cta-heading { margin: 0 0 .5rem; font-size: 1.5em; line-height: 1.2; color: inherit; }
.migal-cta-note { margin: 0; line-height: 1.55; color: #3d3a37; }
.migal-cta .migal-btn { flex: 0 0 auto; }
.migal-cta-link { flex: 0 0 auto; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.migal-cta-link:hover { text-decoration-thickness: 2px; color: inherit; }
.migal-cta-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 560px) {
	.migal-cta { padding: 1.5rem 1.25rem; }
	.migal-cta .migal-btn { width: 100%; text-align: center; }
}

/* Grid */
.migal-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2rem var(--migal-gap);
	grid-template-columns: repeat(var(--migal-cols, 3), minmax(0, 1fr));
}
@media (max-width: 900px) { .migal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .migal-grid { grid-template-columns: 1fr; } }
.migal-item { margin: 0; padding: 0; }
.migal-item figure { margin: 0; }
.migal-open { display: block; overflow: hidden; border-radius: var(--migal-radius); background: #e9e6e1; }
.migal-open:focus-visible { outline: 3px solid var(--migal-accent); outline-offset: 3px; }
.migal-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.migal-open:hover .migal-img { transform: scale(1.03); }
.migal-item figcaption { padding-top: .6rem; display: flex; flex-direction: column; gap: .15rem; line-height: 1.35; }
.migal-title { font-weight: 700; }
.migal-bike { color: var(--migal-accent); font-variant-numeric: lining-nums; }
.migal-caption { color: var(--migal-muted); font-size: .92em; }
.migal-empty { padding: 2rem 0; color: var(--migal-muted); }

/* Pagination */
.migal-pages { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.migal-pages .page-numbers { padding: .45em .8em; border: 1px solid var(--migal-line); border-radius: var(--migal-radius); text-decoration: none; color: inherit; }
.migal-pages .current { background: var(--migal-accent); border-color: var(--migal-accent); color: var(--migal-accent-ink); }

/* Lightbox */
.migal-lb[hidden] { display: none; }
.migal-lb {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(15, 12, 11, .94);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
	color: #f2efea;
	font-family: inherit;
}
.migal-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 3rem 4rem; min-height: 0; }
.migal-lb-stage img { max-width: 100%; max-height: calc(100vh - 6rem); object-fit: contain; }
.migal-lb-info { padding: 3.5rem 1.75rem 2rem; overflow-y: auto; border-left: 1px solid rgba(255,255,255,.12); line-height: 1.55; }
.migal-lb-info h2 { margin: 0 0 .35rem; font-size: 1.35rem; line-height: 1.25; color: #fff; }
.migal-lb-bike { margin: 0 0 1rem; color: #e3b4ae; }
.migal-lb-info p { margin: 0 0 .9rem; }
.migal-lb-by { color: #b9b3ab; font-size: .9em; }
.migal-lb button {
	position: absolute; background: transparent; border: 0; color: #fff; cursor: pointer;
	width: 3rem; height: 3rem; font-size: 1.8rem; line-height: 1; border-radius: 50%;
}
.migal-lb button:hover { background: rgba(255,255,255,.1); }
.migal-lb button:focus-visible { outline: 2px solid #fff; }
.migal-lb-close { top: .75rem; right: .75rem; z-index: 2; }
.migal-lb-prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.migal-lb-next { right: .5rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 800px) {
	.migal-lb { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
	.migal-lb-stage { padding: 3.5rem 1rem 1rem; }
	.migal-lb-stage img { max-height: 60vh; }
	.migal-lb-info { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 1.25rem 1.25rem 2rem; max-height: 40vh; }
}
body.migal-lb-open { overflow: hidden; }

/* Form */
.migal-submit { max-width: 46rem; }
.migal-form { display: flex; flex-direction: column; gap: 1.75rem; }
.migal-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.migal-fieldset legend { padding: 0 0 .6rem; margin-bottom: .4rem; width: 100%; font-size: 1.2em; font-weight: 700; border-bottom: 1px solid var(--migal-line); }
.migal-field, .migal-sub { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.migal-label, .migal-sub label { font-weight: 600; }
.migal-req { color: var(--migal-err); }
.migal-help { margin: 0; color: var(--migal-muted); font-size: .9em; line-height: 1.45; }
.migal-row { display: grid; grid-template-columns: 6rem 1fr 1fr; gap: .9rem; }
.migal-fieldset > .migal-row { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .migal-row, .migal-fieldset > .migal-row { grid-template-columns: 1fr; } }
.migal-desc { gap: .75rem; padding: 1rem; border: 1px solid var(--migal-line); border-radius: var(--migal-radius); }
.migal-form input[type="text"],
.migal-form input[type="email"],
.migal-form textarea {
	width: 100%;
	padding: .65em .75em;
	border: 1px solid #a8a29a;
	border-radius: var(--migal-radius);
	background: var(--migal-field);
	color: #1c1a19;
	font: inherit;
}
.migal-form input:focus-visible, .migal-form textarea:focus-visible { outline: 2px solid var(--migal-accent); outline-offset: 1px; border-color: var(--migal-accent); }
.migal-form input[type="file"] { font: inherit; padding: .75rem; border: 2px dashed var(--migal-line); border-radius: var(--migal-radius); width: 100%; background: transparent; }
.migal-preview { margin-top: .5rem; }
.migal-preview img { max-width: 100%; max-height: 22rem; border-radius: var(--migal-radius); display: block; }
.migal-fileerr { margin: .25rem 0 0; color: var(--migal-err); font-weight: 600; }
.migal-count-num { margin-left: .35rem; }
.migal-count-num.is-over { color: var(--migal-err); }
.migal-check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.migal-check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--migal-accent); }
.migal-human input { max-width: 7rem; }
.migal-actions { margin: 0; }
.migal-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Notices */
.migal-notice { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-left: 4px solid; border-radius: var(--migal-radius); background: #f6f4f1; color: #1c1a19; }
.migal-notice p { margin: 0 0 .4rem; }
.migal-notice p:last-child { margin: 0; }
.migal-notice--ok { border-color: var(--migal-ok); }
.migal-notice--err { border-color: var(--migal-err); }

@media (prefers-reduced-motion: reduce) {
	.migal-img { transition: none; }
	.migal-open:hover .migal-img { transform: none; }
}