/**
 * Mark Turney Photography: touch screens (phones and tablets).
 *
 * Touch screens have no hover, so the desktop hover effects are translated:
 *  1. Nothing stays stuck in its hover look after a tap.
 *  2. A tap shows the desktop hover look while the finger is down.
 *  3. Image cards (homepage collections, Work page galleries) get their
 *     hover look, minus dimming, while they sit in the middle of the screen.
 *     touch-hover.js adds the .is-inview class.
 *
 * Built against theme.css as of 2026-10-30.
 *
 * Desktop (mouse) is not affected.
 */

@media (hover: none) {

	/* ---------------------------------------------------------------- *
	 * 1. Undo hover looks that stick after a tap
	 * ---------------------------------------------------------------- */
	.btn--primary:hover {
		background: var(--primary);
	}
	.btn--primary-container:hover {
		background: var(--primary-container);
	}
	.btn--surface:hover {
		background: var(--surface-container-high);
	}
	.btn--primary:hover .btn__icon--slide {
		transform: none;
	}
	.brand:hover .brand__title {
		color: var(--on-surface);
	}
	.nav-link:hover,
	.main-nav a:hover {
		color: var(--on-surface-variant);
	}
	.contact__toggle:hover,
	.menu-toggle:hover {
		border-color: var(--surface-variant);
	}
	.contact__item:hover {
		background: transparent;
	}
	.contact__item:hover .icon--primary {
		transform: none;
	}
	.footer-phone a:hover,
	.footer-phone--btn:hover .footer-phone__num {
		color: var(--on-surface);
	}
	.social a:hover {
		color: var(--on-surface-variant);
	}
	.mtp-footer-link:hover,
	.footer-menu-wrap a:hover {
		color: var(--secondary);
	}
	.cat-link:not(.is-active):hover {
		color: var(--on-surface-variant);
	}
	.hero__media:hover .hero__img,
	.collection-card:hover .collection-card__img {
		transform: none;
	}
	.collection-card:hover .collection-card__title,
	.g-card:hover .g-card__name {
		color: var(--on-surface);
	}
	.collection-card:hover .card-cta {
		gap: 0.5rem;
	}
	.g-card:hover .g-card__media img {
		opacity: 1;
	}
	.g-masonry .g-card:hover {
		outline-color: transparent;
	}

	/* Open dropdowns / menu keep their highlight */
	.contact__toggle[aria-expanded="true"],
	.menu-toggle[aria-expanded="true"] {
		border-color: var(--outline);
	}
	.footer-phone--btn[aria-expanded="true"] .footer-phone__num {
		color: var(--primary);
	}

	/* ---------------------------------------------------------------- *
	 * 2. Image cards in the middle of the screen while scrolling
	 *    (desktop hover look, without dimming the photo)
	 * ---------------------------------------------------------------- */
	.collection-card.is-inview .collection-card__img {
		transform: scale(1.05);
	}
	.collection-card.is-inview .collection-card__title,
	.g-card.is-inview .g-card__name {
		color: var(--primary);
	}
	.collection-card.is-inview .card-cta {
		gap: 0.75rem;
	}

	/* ---------------------------------------------------------------- *
	 * 3. While tapping: the full desktop hover look
	 * ---------------------------------------------------------------- */
	.btn--primary:active {
		background: var(--primary-fixed);
	}
	.btn--primary-container:active {
		background: var(--primary);
	}
	.btn--surface:active {
		background: var(--surface-variant);
	}
	.btn--primary:active .btn__icon--slide {
		transform: translateX(2px);
	}
	.brand:active .brand__title,
	.nav-link:active,
	.main-nav a:active,
	.footer-phone a:active,
	.footer-phone--btn:active .footer-phone__num,
	.social a:active {
		color: var(--primary);
	}
	.contact__toggle:active,
	.menu-toggle:active {
		border-color: var(--outline);
	}
	.contact__item:active {
		background: var(--surface-variant);
	}
	.contact__item:active .icon--primary {
		transform: scale(1.1);
	}
	.mtp-footer-link:active,
	.footer-menu-wrap a:active,
	.cat-link:not(.is-active):active {
		color: var(--on-surface);
	}
	.collection-card:active .collection-card__img {
		transform: scale(1.05);
	}
	.collection-card:active .collection-card__title,
	.g-card:active .g-card__name {
		color: var(--primary);
	}
	.collection-card:active .card-cta {
		gap: 0.75rem;
	}
	.g-card:active .g-card__media img {
		opacity: 0.88;
	}
	/* White frame (only shows if the frame CSS was added) */
	.g-masonry .g-card:active {
		outline-color: #fff;
	}
}

/* No photo zoom while scrolling for people who turn off motion */
@media (hover: none) and (prefers-reduced-motion: reduce) {
	.collection-card.is-inview .collection-card__img {
		transform: none;
	}
}