/*
 * Outing pictures drawn by the site (includes-outing-pictures.php; design decisions 0k).
 * Two tiles running off the frame, a white plus, a two-line cover title and the area.
 * Sized by its own box (container units), so one picture works on a card, a page, Home and the side column.
 * Colours come from palette tokens only (tools/check_palette_colors.py reads this file).
 */

.momhop-outpic,
.momhop-outpic.momhop-outing-photo.has-image {
	--tile: min(44cqw, 74cqh);
	background: linear-gradient(120deg, var(--outpic-a) 0 50%, var(--outpic-b) 50%);
	container-type: size;
	display: block;
	height: 100%;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.momhop-outpic__tile {
	background: linear-gradient(160deg, color-mix(in srgb, var(--bg) 45%, #fff), var(--bg));
	border-radius: 22%;
	box-shadow: 0 1.8cqh 3cqh -1.2cqh color-mix(in srgb, var(--d) 45%, transparent);
	display: grid;
	height: var(--tile);
	place-items: center;
	position: absolute;
	width: var(--tile);
}

.momhop-outpic__tile svg {
	display: block;
	height: 64%;
	overflow: visible;
	width: 64%;
}

.momhop-outpic__tile.is-a {
	bottom: calc(var(--tile) * -0.27);
	left: 5cqw;
	transform: rotate(-8deg);
}

.momhop-outpic__tile.is-a svg {
	transform: translate(3%, -18%);
}

.momhop-outpic__tile.is-b {
	right: 5cqw;
	top: calc(var(--tile) * -0.25);
	transform: rotate(7deg);
}

.momhop-outpic__tile.is-b svg {
	transform: translate(-3%, 18%);
}

/* A little variety down a list: three tilts, chosen by the Outing. */
.momhop-outpic.is-tilt-1 .momhop-outpic__tile.is-a { transform: rotate(-4deg); }
.momhop-outpic.is-tilt-1 .momhop-outpic__tile.is-b { transform: rotate(10deg); }
.momhop-outpic.is-tilt-2 .momhop-outpic__tile.is-a { transform: rotate(-11deg); }
.momhop-outpic.is-tilt-2 .momhop-outpic__tile.is-b { transform: rotate(4deg); }

/* An Outing with one Place: one tile, on the right. */
.momhop-outpic.is-single .momhop-outpic__tile.is-a {
	bottom: auto;
	left: auto;
	right: 7cqw;
	top: 50%;
	transform: translateY(-50%) rotate(6deg);
}

.momhop-outpic.is-single .momhop-outpic__tile.is-a svg {
	transform: none;
}

.momhop-outpic__plus {
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--mh-ink) 16%, transparent);
	color: var(--mh-coral);
	display: grid;
	font-family: var(--mh-ui-font);
	font-size: clamp(11px, 4.4cqw, 19px);
	font-weight: 800;
	height: clamp(18px, 7.6cqw, 32px);
	left: 50%;
	line-height: 1;
	place-items: center;
	position: absolute;
	top: 52%;
	transform: translate(-50%, -50%);
	width: clamp(18px, 7.6cqw, 32px);
	z-index: 5;
}

.momhop-outpic__head {
	color: var(--mh-ink);
	display: flex;
	flex-direction: column;
	font-family: var(--mh-display-font);
	font-size: clamp(11px, 7.2cqw, 30px);
	font-weight: 700;
	left: 6cqw;
	letter-spacing: -0.01em;
	line-height: 0.98;
	max-width: 50cqw;
	position: absolute;
	top: 8cqh;
	z-index: 4;
}

.momhop-outpic__head i {
	color: var(--mh-coral-deep);
	font-style: italic;
	font-weight: 500;
}

.momhop-outpic__where {
	bottom: 8cqh;
	color: var(--mh-ink);
	font-family: var(--mh-ui-font);
	font-size: clamp(7px, 2.6cqw, 11px);
	font-weight: 800;
	letter-spacing: 0.14em;
	opacity: 0.62;
	position: absolute;
	right: 6cqw;
	text-transform: uppercase;
	z-index: 4;
}

/* Small boxes (a list row, a narrow card): the tiles alone read better than tiny words. */
@container (max-width: 220px) {
	.momhop-outpic__where { display: none; }
}

@container (max-width: 140px) {
	.momhop-outpic__head,
	.momhop-outpic__plus { display: none; }

	/* A list row (owner 2026-10-19: "list view icons might need a little work"): two whole tiles
	   overlapping corner to corner, so both drawings show, instead of two cut-off corners. */
	.momhop-outpic__tile,
	.momhop-outpic.is-tilt-1 .momhop-outpic__tile,
	.momhop-outpic.is-tilt-2 .momhop-outpic__tile {
		border-radius: 26%;
		box-shadow: 0 2px 5px -2px color-mix(in srgb, var(--d) 50%, transparent);
		height: 64cqmin;
		width: 64cqmin;
	}

	.momhop-outpic__tile svg,
	.momhop-outpic__tile.is-a svg,
	.momhop-outpic__tile.is-b svg {
		height: 74%;
		transform: none;
		width: 74%;
	}

	.momhop-outpic .momhop-outpic__tile.is-a {
		bottom: auto;
		left: 3cqw;
		right: auto;
		top: 3cqh;
		transform: rotate(-6deg);
	}

	.momhop-outpic .momhop-outpic__tile.is-b {
		bottom: 3cqh;
		left: auto;
		right: 3cqw;
		top: auto;
		transform: rotate(6deg);
	}

	.momhop-outpic.is-single .momhop-outpic__tile.is-a {
		height: 80cqmin;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) rotate(-4deg);
		width: 80cqmin;
	}
}

/* The card's "photo coming soon" line stays hidden behind a drawn picture. */
.momhop-card__media:has(.momhop-outpic)::before { content: none; }

/* On the Outing page the drawn picture needs no dark scrim, which is there for photos. */
.momhop-outing-photo.momhop-outpic.has-image + .momhop-detail__scrim { display: none; }

/* Home: the Pick seal moves to the bottom so the headline keeps the top. */
.momhop-homefresh__photo .momhop-outpic ~ .momhop-homefresh__seal { bottom: 8px; top: auto; }

/* Side column: the picture keeps the photo's 16:9 box. */
.momhop-shell-side__picture { aspect-ratio: 16 / 9; height: auto; }

/* Admin: the preview in the Outing editor and the set in Manage, Appearance. */
.momhop-outing-picture-fields__preview {
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	margin: 6px 0 12px;
	overflow: hidden;
	width: min(360px, 100%);
}

.momhop-outpic-set {
	display: grid;
	gap: 12px 8px;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	margin-top: 12px;
}

.momhop-outpic-set__item {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: center;
}

.momhop-outpic-set__item .momhop-outpic__tile {
	height: 64px;
	position: static;
	width: 64px;
}

.momhop-outpic-set__item b { font-size: 12px; }
.momhop-outpic-set__item small { color: var(--mh-ink-soft); font-size: 10px; }

/* Outing photos with overlay A (owner 2026-10-23): the kinds' icons at the top, the two Places' names
   and the area over a fade at the bottom. Sized by its own box, like the drawn picture. */
.momhop-outphoto,
.momhop-outphoto.momhop-outing-photo.has-image {
	container-type: size;
	display: block;
	height: 100%;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.momhop-outphoto img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: var(--momhop-media-position-x, 50%) var(--momhop-media-position-y, 0%);
	position: absolute;
	transform: scale(var(--momhop-media-scale, 1));
	transform-origin: var(--momhop-media-position-x, 50%) var(--momhop-media-position-y, 0%); /* as the editor's Adjust frames it */
	width: 100%;
}

.momhop-outphoto__fade {
	/* Deeper and taller since 2026-10-23 (owner: "white text in some blends in a bit" on light photos). */
	background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--mh-ink) 55%, transparent) 55%, color-mix(in srgb, var(--mh-ink) 92%, transparent) 100%);
	inset: 0;
	position: absolute;
	z-index: 1;
}

.momhop-outphoto__icons {
	align-items: center;
	display: flex;
	gap: clamp(3px, 1.4cqw, 7px);
	left: 4cqw;
	position: absolute;
	top: 4cqw;
	z-index: 2;
}

.momhop-outphoto__icons b {
	color: #fff;
	font-family: var(--mh-ui-font);
	font-size: clamp(11px, 3.6cqw, 17px);
	font-weight: 800;
	text-shadow: 0 1px 4px color-mix(in srgb, var(--mh-ink) 60%, transparent);
}

.momhop-outphoto__ic {
	background: linear-gradient(160deg, color-mix(in srgb, var(--bg) 45%, #fff), var(--bg));
	border-radius: 26%;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--mh-ink) 22%, transparent);
	display: grid;
	height: clamp(22px, 9.5cqw, 44px);
	place-items: center;
	width: clamp(22px, 9.5cqw, 44px);
}

.momhop-outphoto__ic svg {
	display: block;
	height: 70%;
	overflow: visible;
	width: 70%;
}

.momhop-outphoto__words {
	bottom: 4.5cqw;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	left: 4.5cqw;
	position: absolute;
	right: 4.5cqw;
	text-shadow: 0 1px 2px color-mix(in srgb, var(--mh-ink) 75%, transparent), 0 2px 14px color-mix(in srgb, var(--mh-ink) 55%, transparent);
	z-index: 2;
}

.momhop-outphoto__words span,
.momhop-outphoto__words i {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	font-family: var(--mh-display-font);
	letter-spacing: -0.01em;
	line-height: 1.04;
	overflow: hidden;
	text-wrap: balance;
}

.momhop-outphoto__words span {
	font-size: clamp(13px, 6.6cqw, 32px);
	font-weight: 700;
}

.momhop-outphoto__words i {
	color: var(--mh-coral-soft);
	font-size: clamp(12px, 5.2cqw, 25px);
	font-style: italic;
	font-weight: 600;
}

.momhop-outphoto__words small {
	font-family: var(--mh-ui-font);
	font-size: clamp(8px, 2.6cqw, 11px);
	font-weight: 800;
	letter-spacing: 0.12em;
	margin-top: 0.4em;
	opacity: 0.92;
	text-transform: uppercase;
}

@container (max-width: 220px) {
	.momhop-outphoto__words small { display: none; }
	.momhop-outphoto__words i { -webkit-line-clamp: 1; }
}

/* A list row: the photo alone. */
@container (max-width: 140px) {
	.momhop-outphoto__words,
	.momhop-outphoto__fade,
	.momhop-outphoto__icons { display: none; }
}

/* The photo has its own fade, so the Outing page's dark scrim and the card's "photo coming soon" stay off. */
.momhop-outing-photo.momhop-outphoto.has-image + .momhop-detail__scrim { display: none; }
.momhop-card__media:has(.momhop-outphoto)::before { content: none; }
/* On a photo the names sit at the bottom and the icons top-left, so the Pick badge takes the top-right corner. */
.momhop-homefresh__photo .momhop-outphoto ~ .momhop-homefresh__seal { bottom: auto; left: auto; right: 8px; top: 8px; }

/* Admin: the editor's framing preview carries the same words and icons; drags pass through them. */
.momhop-media-frame.has-outphoto { container-type: inline-size; }
.momhop-media-frame.has-outphoto .momhop-outphoto__fade,
.momhop-media-frame.has-outphoto .momhop-outphoto__icons,
.momhop-media-frame.has-outphoto .momhop-outphoto__words { pointer-events: none; }

/* Admin: the paste box in the Outing editor. */
.momhop-outing-paste {
	background: var(--mh-cream, #FBF6EF);
	border: 2px dashed var(--mh-line, #ECE0D1);
	border-radius: 12px;
	cursor: pointer;
	display: grid;
	gap: 4px;
	margin: 10px 0 12px;
	max-width: 520px;
	padding: 14px 16px;
}

.momhop-outing-paste:focus,
.momhop-outing-paste.is-over { border-color: var(--mh-coral, #D8694B); outline: none; }
.momhop-outing-paste.is-done { border-color: var(--mh-sage, #3C7E60); border-style: solid; }
.momhop-outing-paste span { color: var(--mh-ink-soft, #7A6F64); font-size: 13px; }
.momhop-outing-paste em { color: var(--mh-sage, #3C7E60); font-size: 13px; font-style: normal; font-weight: 700; }
.momhop-outing-paste em:empty { display: none; }