/*
 * Shortlist guide card (template-parts/sl-guide-card.php): normal, hover and compact.
 * Directory revamp phase 5, T3. Handle hm-sl-guide-card, dependency hm-sl-controls
 * (shortlist-controls.css: .sl-img, .sl-count, .is-hl and the --sl-* tokens).
 * Board: GuideCard.png, round 6. Every token carries the Londonly value as its fallback,
 * so the card keeps its shape on a site that sets no --sl-* value of its own.
 * Own classes only: .sl-guide-card and its .sl-guide-card__* parts.
 */

.sl-guide-card{
	position:relative; display:flex; flex-direction:column; min-width:0;
	color:var(--sl-ink,#15221B); font-family:var(--sl-f-body,'DM Sans',sans-serif);
}
.sl-guide-card a,
.sl-guide-card a:hover,
.sl-guide-card a:focus{ color:var(--sl-ink,#15221B); text-decoration:none; }

/* ── The photo ── */
.sl-guide-card__media{ position:relative; }
.sl-guide-card__ph{
	display:block; aspect-ratio:8 / 5; overflow:hidden;
	border-radius:var(--sl-r-img,12px); background:var(--sl-panel,#EEF1EC);
}
.sl-guide-card__ph img{
	display:block; width:100%; height:100%; max-width:none; object-fit:cover;
	transition:transform .4s ease;
}
.sl-guide-card:not(.is-compact):hover .sl-guide-card__ph img{ transform:scale(1.05); }

/* ── The count tag: up to four place photos, the yellow number, "picks" ── */
.sl-guide-card__count{
	position:absolute; left:10px; bottom:10px; z-index:1;
	display:inline-flex; align-items:center; gap:8px; box-sizing:border-box;
	height:30px; padding:0 12px 0 4px; border-radius:var(--sl-r-pill,100px);
	background:var(--sl-cream,#FAFAF8);
	font:600 13px/1 var(--sl-f-body,'DM Sans',sans-serif); white-space:nowrap;
	transition:box-shadow .14s;
}
.sl-guide-card__count:focus-visible{ outline:2px solid var(--sl-ink,#15221B); outline-offset:3px; }
.sl-guide-card__thumbs{ display:flex; }
.sl-guide-card__thumbs img{
	display:block; width:22px; height:22px; max-width:none; object-fit:cover;
	box-shadow:0 0 0 2px var(--sl-cream,#FAFAF8);
}
.sl-guide-card__thumbs img + img{ margin-left:-4px; }
.sl-guide-card__n{ display:inline-flex; align-items:center; gap:5px; }
.sl-guide-card__n:first-child{ margin-left:2px; }   /* a guide with no pick photos: the number sits off the tag's edge */

/* ── The neighbourhoods line and the title ── */
.sl-guide-card__hoods{
	margin:12px 0 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
	font:400 14px/14px var(--sl-f-kick,'Bebas Neue',sans-serif); letter-spacing:.1em;
	text-transform:uppercase; color:var(--sl-ink-2,#5F6B62);
}
.sl-guide-card__title{
	margin:8px 0 0; padding:0; letter-spacing:normal; text-transform:none;
	font:500 20px/1.3 var(--sl-f-serif,'Fraunces',Georgia,serif); color:var(--sl-ink,#15221B);
}
.sl-guide-card:not(.is-compact):hover .sl-guide-card__title a,
.sl-guide-card__title a:focus-visible,
.sl-guide-card.is-compact .sl-guide-card__link:hover .sl-guide-card__title,
.sl-guide-card.is-compact .sl-guide-card__link:focus-visible .sl-guide-card__title,
.sl-guide-card__row:hover .sl-guide-card__row-name,
.sl-guide-card__row:focus-visible .sl-guide-card__row-name{
	text-decoration:underline; text-decoration-color:var(--sl-hl,#FFC21A);
	text-decoration-thickness:6px; text-underline-offset:-2px; text-decoration-skip-ink:none;
}

/* ── The hover form: the list of picks opens from the count tag ──
   Edge-safe by itself, wherever the card sits: hidden, the list is display:none, so it adds
   nothing to the page's width (an invisible box still would); open, it stays inside the card's
   own width (360px on a card with room, the card's width less 10px otherwise), so a card in a
   last column or at a phone's edge never pushes the page wider. */
.sl-guide-card__pop{
	display:none; position:absolute; left:10px; top:calc(100% - 2px); z-index:5;
	width:360px; max-width:calc(100% - 10px); box-sizing:border-box;
	padding:16px 16px 6px; border:1px solid var(--sl-line,#D9DED7);
	border-radius:var(--sl-r-panel,18px); background:var(--sl-cream,#FAFAF8);
	box-shadow:0 18px 44px -14px rgba(21,34,27,.32);
	transition:opacity .14s ease, transform .14s ease;
}
.sl-guide-card__pop::before{ content:''; position:absolute; left:0; right:0; top:-16px; height:16px; }   /* hover bridge from the tag */
@media (hover:hover){   /* a pointer that hovers; a touch screen never opens it (the tag is a link) */
	.sl-guide-card.is-hover .sl-guide-card__count:hover + .sl-guide-card__pop,
	.sl-guide-card.is-hover .sl-guide-card__pop:hover{ display:block; }
}
.sl-guide-card.is-hover .sl-guide-card__count:focus-visible + .sl-guide-card__pop,
.sl-guide-card.is-hover .sl-guide-card__pop:focus-within{ display:block; }
@starting-style{   /* the fade in, where supported; elsewhere the list simply appears */
	.sl-guide-card.is-hover .sl-guide-card__pop{ opacity:0; transform:translateY(4px); }
}
.sl-guide-card.is-hover .sl-guide-card__count:hover,
.sl-guide-card.is-hover .sl-guide-card__count:focus-visible{
	box-shadow:0 0 0 2px var(--sl-hl-2,#7A5200);
}
/* Its own rule: a browser without :has() drops only this one, never the ring above. */
.sl-guide-card.is-hover .sl-guide-card__media:has(.sl-guide-card__pop:hover, .sl-guide-card__pop:focus-within) .sl-guide-card__count{
	box-shadow:0 0 0 2px var(--sl-hl-2,#7A5200);
}
.sl-guide-card__pop-k{
	margin:0; font:400 14px/1.2 var(--sl-f-kick,'Bebas Neue',sans-serif); letter-spacing:.14em;
	text-transform:uppercase; color:var(--sl-hl-2,#7A5200);
}
.sl-guide-card__rows{ list-style:none; margin:6px 0 0; padding:0; }
.sl-guide-card__rows li{ margin:0; padding:0; border-bottom:1px solid var(--sl-line,#D9DED7); }
.sl-guide-card__rows li:last-child{ border-bottom:0; }
.sl-guide-card__row{ display:flex; align-items:center; gap:14px; padding:9px 0; }
.sl-guide-card__row-ph{ flex:none; display:block; width:56px; height:56px; background:var(--sl-panel,#EEF1EC); }
.sl-guide-card__row-ph img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.sl-guide-card__row-text{ display:flex; flex-direction:column; min-width:0; }
.sl-guide-card__row-name{ font:600 17px/1.3 var(--sl-f-serif,'Fraunces',Georgia,serif); }
.sl-guide-card__row-hood{ font-size:14px; line-height:1.4; color:var(--sl-ink-2,#5F6B62); }
.sl-guide-card a.sl-guide-card__all{
	display:block; padding:10px 0; border-top:1px solid var(--sl-line,#D9DED7);
	font:700 14px/1.3 var(--sl-f-body,'DM Sans',sans-serif);
	text-decoration:underline; text-decoration-color:var(--sl-hl-2,#7A5200);
	text-decoration-thickness:2px; text-underline-offset:4px;
}
/* ── The compact form: a row for the end of a guide and sidebars ── */
.sl-guide-card.is-compact{ display:block; }
.sl-guide-card.is-compact + .sl-guide-card.is-compact{ margin-top:-1px; }   /* stacked rows share one rule */
.sl-guide-card__link{
	display:flex; gap:16px; padding:14px 0;
	border-top:1px solid var(--sl-line,#D9DED7); border-bottom:1px solid var(--sl-line,#D9DED7);
}
.sl-guide-card.is-compact .sl-guide-card__ph{ flex:none; width:112px; height:80px; aspect-ratio:auto; }
.sl-guide-card__text{ display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
.sl-guide-card__kicker{
	font:400 14px/1 var(--sl-f-kick,'Bebas Neue',sans-serif); letter-spacing:.12em;
	text-transform:uppercase; color:var(--sl-ink-2,#5F6B62);
}
.sl-guide-card.is-compact .sl-guide-card__title{ display:block; margin:0; font:600 18px/1.25 var(--sl-f-serif,'Fraunces',Georgia,serif); }
.sl-guide-card.is-compact.has-hoods .sl-guide-card__link{ align-items:center; gap:14px; padding:12px 0; }   /* "Another guide" (GuideV2Phone) */
.sl-guide-card.is-compact .sl-guide-card__hoods{
	margin:0; white-space:normal; overflow:visible;
	font:400 13px/1.35 var(--sl-f-body,'DM Sans',sans-serif); letter-spacing:0; text-transform:none;
}

@media (prefers-reduced-motion:reduce){
	.sl-guide-card__ph img,
	.sl-guide-card__pop{ transition:none; }
	.sl-guide-card:not(.is-compact):hover .sl-guide-card__ph img{ transform:none; }
}