/* Custom Cards Grid — wedding list + password step */
.custom_cards_grid.custom_cards_grid--wedding .custom_cards_grid__section-title {
	text-align: center;
	margin-bottom: 2rem;
}

.custom_cards_grid__card {
	@media (max-width: 992px) {
		padding: 0 10px;
	}
}

.custom_cards_grid__card--wedding .custom_cards_grid__inner {
	display: block;
	cursor: pointer;
	text-align: center;
	background: #f8f7f6;
	padding: 40px;
	border: 1px solid #f8f7f6;
	transition: background 0.3s, border 0.3s ease-in-out;
	height: 100%; /* fill the (stretched) grid cell → equal-height cards per row */

	@media (max-width: 992px) {
		padding: 20px 20px 17px 20px !important;
	}
}

/* Even vertical gap between card rows. One mechanism, applied to the grid cell
   (.col) rather than the inner box, so the spacing is uniform regardless of how
   tall each card is. `.col.<class>` outranks the theme's `.col{margin-bottom}`
   without needing !important. */
.col.custom_cards_grid__card--wedding {
	margin-bottom: 35px;

	@media (max-width: 992px) {
		margin-bottom: 20px;
	}
}

.custom_cards_grid__card--wedding.is-open .custom_cards_grid__inner {
	cursor: default;
}

/* Outline only on keyboard navigation (Tab), not on mouse click.
 * :focus-visible is the modern way to hide the outline from click
 * focus while keeping it for accessibility (keyboard users). */
.custom_cards_grid__card--wedding .custom_cards_grid__inner:focus {
	outline: none;
}

.custom_cards_grid__card--wedding .custom_cards_grid__inner:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom_cards_grid__card--wedding .custom_cards_grid__inner figure {
	margin-bottom: 70px !important;

	@media (max-width: 992px) {
		margin-bottom: 20px !important;
	}
}

.custom_cards_grid__card--wedding .custom_cards_grid__inner figure img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	object-position: center;
	vertical-align: middle;
}

.custom_cards_grid__title {
	display: block;
	font-size: 1.125rem;
	line-height: 1.35;
	margin-bottom: 30px;
	color: inherit;
	/* Never clip long couple names — let them wrap fully (client feedback,
	   point 5). overflow-wrap is a safety net for a single very long token. */
	overflow-wrap: break-word;

	@media (max-width: 992px) {
		margin-bottom: 15px;
	}
}

/* Each partner name stays together (inline-block = atomic for line breaking);
   the line breaks at the space between the two names, so a long second partner
   moves onto its own row instead of being split mid-name. */
.custom_cards_grid__name {
	display: inline-block;
}

.custom_cards_grid__date {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	opacity: 0.65;
	margin-bottom: 15px;

	@media (max-width: 992px) {
		margin-bottom: 8px;
	}
}

.custom_cards_grid__password {
	margin: 0 1rem;
}

.custom_cards_grid__password[hidden] {
	display: none !important;
}

.custom_cards_grid__password-form {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid #d0d0d0;
	background: #fafafa;
	padding: 5px 5px;
	max-width: 350px;
	margin: 0 auto;
}

/* Override theme globals (styles.css) that target input[type=password]
 * and button with !important / high specificity. Without these the
 * input gets 16px font, full-width, bottom border, and the submit
 * button gets a black 100%-width block style. */
.custom_cards_grid__password-form input[type="text"],
.custom_cards_grid__password-form input[type="password"] {
	flex: 1;
	width: auto !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0.25rem 0.5rem !important;
	font-size: 0.75rem !important;
	line-height: 1.3 !important;
	letter-spacing: 0.08em;
	text-transform: none !important;
	min-width: 0;
	color: #1a1a1a;
}

.custom_cards_grid__password-form input:focus {
	outline: none;
	background: transparent !important;
}

.custom_cards_grid__password-submit {
	width: auto !important;
	border: 0;
	background: transparent !important;
	padding: 0.25rem 0.5rem 0.25rem 0.55rem !important;
	cursor: pointer;
	font-size: 1rem !important;
	line-height: 1 !important;
	color: #1a1a1a;
	text-transform: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.custom_cards_grid__password-submit:hover,
.custom_cards_grid__password-submit:focus {
	color: #000;
	outline: none;
}

.custom_cards_grid__password-submit:disabled {
	cursor: wait;
}

/* Override global .lb:before absolute positioning so the icon flows
   naturally inside the submit button (which has no text content). */
.custom_cards_grid__password-submit .lb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	min-width: 0.9rem;
	min-height: 0.9rem;
}

.custom_cards_grid__password-submit .lb:before {
	position: static;
	display: inline-block;
	font-size: 0.95rem;
	line-height: 1;
	color: currentColor;
}

/* Show/hide password eye toggle. Sits between the input and the submit
   arrow; transparent like the submit button but slightly muted. */
.custom_cards_grid__password-toggle {
	width: auto !important;
	border: 0;
	background: transparent !important;
	padding: 0 0.4rem !important;
	margin: 0;
	cursor: pointer;
	line-height: 1 !important;
	color: #777;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.custom_cards_grid__password-toggle:hover,
.custom_cards_grid__password-toggle:focus {
	color: #1a1a1a;
	outline: none;
}

.custom_cards_grid__password-toggle .ccg-eye {
	display: block;
	width: 20px;
	height: 20px;
}

/* Default (password hidden): show the open eye, hide the crossed-out one.
   When pressed (password visible): swap. */
.custom_cards_grid__password-toggle .ccg-eye--hide {
	display: none;
}

.custom_cards_grid__password-toggle[aria-pressed="true"] .ccg-eye--show {
	display: none;
}

.custom_cards_grid__password-toggle[aria-pressed="true"] .ccg-eye--hide {
	display: block;
}

.custom_cards_grid__error {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: #b5432a;
	text-align: center;
}

.custom_cards_grid__error a {
	color: inherit;
	text-decoration: underline;
	font-size: 0.75rem;

}

/* Direct-link variant (no password) */
.custom_cards_grid__card--linked .custom_cards_grid__inner--link {
	text-decoration: none;
	color: inherit;
}

/* Hover — match Stories / Geschichten section style */
.custom_cards_grid__card--wedding:not(.is-open) .custom_cards_grid__inner:hover,
.custom_cards_grid__card--linked .custom_cards_grid__inner--link:hover,
.custom_cards_grid__card--linked .custom_cards_grid__inner--link:focus {
	background: transparent;
	border-color: #E1DFDD;
}