/* Korjaamon tai myymälän kortti (template-parts/cards/card-location.php).

   Kolme käyttöpaikkaa, kortin --context-muunnelman mukaan:

     --list    korjaamohaun tuloslista (blocks/location-search)
     --panel   korjaamohaun kartan paneeli (blocks/location-search)
     --select  huoltotarjouspyynnön valittu korjaamo
               (blocks/service-offer-form): kuten listakortti ilman
               palveluita, Valitse-painike lukitsee valinnan.

   Rekisteröidään kahvalla froggy-location-card (inc/assets.php), ja lohkot
   ottavat sen käyttöön block.json:n style-listassa kuten froggy-mapin.

   Harmaa pinta (#e2e2e2) on paletin harmaata valkoiseen sekoitettuna, jotta
   Mekonomenin paletti sävyttää senkin. Sama arvo on korjaamohaun juuressa
   (blocks/location-search/style.css), jossa paneeli käyttää sitä. */

.froggy-location-card {
	/* Osioiden väli ja sulkemispainikkeen koko (1rem kuvake + 2 × 1rem
	   täyte): painikkeen sijoittelu laskee näistä (ks. __close). */
	--froggy-location-card-gap: var(--froggy-space-60);
	--froggy-location-close-size: 3rem;
	--froggy-location-surface: color-mix(
		in srgb,
		var(--wp--preset--color--gray) 21%,
		var(--wp--preset--color--white)
	);

	display: flex;
	flex-direction: column;
	gap: var(--froggy-location-card-gap);
	color: var(--froggy-paragraph);
}

.froggy-location-card--list,
.froggy-location-card--select {
	box-sizing: border-box;
	padding: var(--froggy-space-50);
	border: 1px solid var(--froggy-location-surface);
	background: var(--wp--preset--color--white);
}

.froggy-location-card--list:focus,
.froggy-location-card--select:focus {
	outline: none;
}

.froggy-location-card__main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--froggy-space-40);
}

.froggy-location-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--froggy-space-40);
	width: 100%;
}

/* Tila sulkemispainikkeelle, joka on otsikon rinnalla (ks. __close). */
.froggy-location-card--panel .froggy-location-card__head {
	box-sizing: border-box;
	padding-inline-end: calc(
		var(--froggy-location-close-size) + var(--froggy-space-40)
	);
}

:root .froggy-location-card__title {
	margin: 0;
	color: var(--froggy-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2;
}

:root .froggy-location-card__subtitle {
	margin: 0 0 var(--froggy-space-40);
	color: var(--froggy-heading);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
}

/*
 * Painike on kortin ensimmäinen lapsi (card-location.php). Negatiivinen
 * alamarginaali nostaa perustiedot sen rinnalle, jolloin se näyttää olevan
 * otsikkorivillä. z-index pitää sen päällekkäin menevän osion yläpuolella,
 * jotta klikkaus osuu painikkeeseen.
 */
.froggy-location-card__close {
	z-index: 1;
	display: inline-flex;
	flex: 0 0 auto;
	align-self: flex-end;
	box-sizing: border-box;
	width: var(--froggy-location-close-size);
	height: var(--froggy-location-close-size);
	margin: 0 0
		calc(
			-1 * (var(--froggy-location-close-size) +
						var(--froggy-location-card-gap))
		);
	padding: 1rem;
	border: 0;
	border-radius: var(--wp--custom--radius-input);
	background: var(--froggy-location-surface);
	color: var(--froggy-heading);
	cursor: pointer;
}

.froggy-location-card__close svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

.froggy-location-card__close:focus-visible {
	outline: 2px solid var(--froggy-heading);
	outline-offset: 2px;
}

/* Hover: harmaa tausta tummuu hieman otsikon väriin päin. Vain hiirellä,
   ettei kosketusnäytön napautus jätä painiketta tummennetuksi. */
@media (hover: hover) {
	.froggy-location-card__close {
		transition: background-color 0.15s ease;
	}

	.froggy-location-card__close:hover {
		background: color-mix(
			in srgb,
			var(--froggy-heading) 12%,
			var(--froggy-location-surface)
		);
	}
}

:root .froggy-location-card__address {
	margin: 0;
}

/* Yhteystiedot: sama ulkoasu kuin korjaamosivun shop-contact-lohkossa. */
.froggy-location-card__links {
	display: grid;
	gap: var(--froggy-space-40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.froggy-location-card__link-row {
	display: flex;
	align-items: center;
	gap: var(--froggy-space-20);
}

.froggy-location-card__link-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--froggy-icon);
}

.froggy-location-card__link-icon svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

:root .froggy-location-card__link {
	color: var(--froggy-paragraph);
	text-decoration: none;
	overflow-wrap: anywhere;
}

:root .froggy-location-card__link:hover,
:root .froggy-location-card__link:focus-visible {
	text-decoration: underline;
}

:root .froggy-location-card__link.is-strong {
	color: var(--froggy-link);
	font-weight: 700;
	text-decoration: underline;
}

:root .froggy-location-card__cta {
	margin: 0;
}

/* Aukioloajat: päivät lihavoituna vasemmalla, ajat oikealla. */
.froggy-location-card__hours-list {
	display: grid;
	gap: var(--froggy-space-20);
	margin: 0;
}

.froggy-location-card__hours-row {
	display: flex;
	justify-content: space-between;
	gap: var(--froggy-space-40);
}

.froggy-location-card__hours-row dt {
	font-weight: 700;
}

.froggy-location-card__hours-row dd {
	margin: 0;
	white-space: nowrap;
}

/* Palvelut: kuvakelaatikko 40 × 24 kuten korjaamosivulla (shop-services). */
.froggy-location-card__services-list {
	display: grid;
	gap: var(--froggy-space-20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.froggy-location-card__service {
	display: flex;
	align-items: center;
	gap: var(--froggy-space-20);
}

.froggy-location-card__service-icon {
	display: flex;
	flex: 0 0 2.5rem;
	align-items: center;
	justify-content: center;
	height: 1.5rem;
	color: var(--froggy-icon);
}

.froggy-location-card__service-icon img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.froggy-location-card__service-icon svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.froggy-location-card__more {
	margin-top: var(--froggy-space-20);
	padding: 0;
	border: 0;
	background: none;
	color: var(--froggy-link);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.froggy-location-card__services.is-collapsed
	.froggy-location-card__service:nth-child(n + 4) {
	display: none;
}

/* Mobiilin listakortissa ei ole palveluita (Figma "Lista mobiili"). */
.froggy-location-card--list .froggy-location-card__services {
	display: none;
}
/* Valintapainikkeen tila: "Valitse" tai lukittuna "Valittu" (is-selected,
   blocks/service-offer-form/view.js). */
.froggy-location-card__select-done,
.froggy-location-card--select.is-selected .froggy-location-card__select-label {
	display: none;
}

.froggy-location-card--select.is-selected .froggy-location-card__select-done {
	display: inline-flex;
	align-items: center;
	gap: var(--froggy-space-05);
}

/* Kuvakkeen kääre flexinä ja svg lohkona: muuten svg istuu tekstin
   perusviivalla rivilaatikossa eikä keskity. */
.froggy-location-card__select-done > span {
	display: flex;
}

.froggy-location-card__select-done svg {
	display: block;
	width: 1.25em;
	height: 1.25em;
}

.froggy-location-card__cta button.wp-block-button__link {
	border: 0;
	cursor: pointer;
}

.froggy-location-card--select.is-selected .froggy-location-card__cta button {
	cursor: default;
}

/* --------------------------------------------------------------------------
 * 960px: listakortti kolmessa, valintakortti kahdessa palstassa
 * ----------------------------------------------------------------------- */

@media (min-width: 960px) {
	.froggy-location-card--panel {
		--froggy-location-card-gap: var(--froggy-space-80);
	}

	/*
	 * Paneeli vierittyy itse, joten sulkemispainike pysyy sen yläkulmassa
	 * samassa kohdassa kuin vierittämättä: sticky-siirtymä lasketaan paneelin
	 * täytteen sisäreunasta, joten top: 0. Valkoinen rengas erottaa painikkeen
	 * alta vierivästä sisällöstä.
	 */
	.froggy-location-card--panel .froggy-location-card__close {
		position: sticky;
		top: 0;
		box-shadow: 0 0 0 var(--froggy-space-05) var(--wp--preset--color--white);
	}

	/* Paneeli vierittyy, joten kaikki palvelut näytetään. */
	.froggy-location-card__services.is-collapsed
		.froggy-location-card__service:nth-child(n + 4) {
		display: flex;
	}

	:root .froggy-location-card__more {
		display: none;
	}

	/* Listakortti: perustiedot | palvelut | aukioloajat. */
	.froggy-location-card--list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--froggy-space-80);
	}

	.froggy-location-card--list .froggy-location-card__services {
		display: block;
		grid-column: 2;
		grid-row: 1;
	}

	.froggy-location-card--list .froggy-location-card__hours {
		grid-column: 3;
		grid-row: 1;
	}

	/* Valintakortti: perustiedot | aukioloajat. */
	.froggy-location-card--select {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--froggy-space-80);
	}
}