/* ═══════════════════════════════════════════════════════════════════════
   city.css — public /city listing.

   Block: .gg-ct  (CiTies)

   Unique visual treatment vs categories — the city PHOTO is the hero of
   each card with the city name overlaid on it (so users navigate by
   "look", not by reading). Body below shows quick stats + CTA.

   Sections, top-to-bottom:
     1. Body wrapper + ambient
     2. Atoms (eyebrow, btn, crumbs)
     3. Compact hero (split content + 4 stat chips)
     4. Cities grid — 4-up responsive, first card double-wide as feature
     5. Bottom CTA
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Body wrapper ─────────────────────────────────────────────────────── */
.gg-ct-body{ background: var(--gg-off-white, #FAFAFA); }
.gg-ct-body::before{
	content: ""; position: fixed; inset: 0;
	background:
		radial-gradient(1100px 460px at 8% -8%, rgba(237,41,56,.06), transparent 70%),
		radial-gradient(900px 420px at 110% 14%, rgba(245,158,11,.05), transparent 75%);
	pointer-events: none; z-index: 0;
}
.gg-ct{ width: 100%; padding: 20px 28px 32px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
@media (max-width: 700px){ .gg-ct{ padding: 14px 14px 48px; } }

/* ── Atoms ───────────────────────────────────────────────────────────── */
.gg-ct__eyebrow{
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-2xs, 11px);
	font-weight: 700;
	color: var(--gg-red, #ED2938);
	letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 4px;
}
.gg-ct__eyebrow i{ font-size: 13px; }
.gg-ct__eyebrow--light{ color: rgba(255,255,255,.82); }
.gg-ct__eyebrow--light i{ color: #fff; }

.gg-ct__btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 20px;
	border-radius: 12px;
	font-family: var(--gg-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
	transition: all 200ms ease;
	border: 1.5px solid transparent;
}
.gg-ct__btn i{ transition: transform 200ms ease; }
.gg-ct__btn--white{
	background: #fff;
	color: var(--gg-red-deep, #B91C28);
	box-shadow: 0 10px 26px -10px rgba(0,0,0,.4);
}
.gg-ct__btn--white:hover{ transform: translateY(-1px); }
.gg-ct__btn--white:hover i{ transform: translateX(2px); }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.gg-ct__crumbs{ margin: 0; }
.gg-ct__crumbs-list{
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-family: var(--gg-font-head);
	font-size: var(--gg-text-xs, 12px);
	font-weight: 600;
	color: var(--gg-gray-500, #6B7280);
}
.gg-ct__crumbs-list li{ display: inline-flex; align-items: center; gap: 8px; }
.gg-ct__crumbs-list li:not(:last-child)::after{ content: "/"; color: var(--gg-gray-300, #D1D5DB); font-weight: 500; }
.gg-ct__crumbs-list a{ color: var(--gg-gray-500, #6B7280); transition: color 180ms ease; }
.gg-ct__crumbs-list a:hover{ color: var(--gg-red-deep, #B91C28); }
.gg-ct__crumbs-list span[aria-current]{ color: var(--gg-gray-800, #1F2937); }

/* ── HERO — compact ───────────────────────────────────────────────── */
.gg-ct__head{
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 36px);
	background: linear-gradient(135deg, #FFF8F8 0%, #FFF1F2 50%, #FFFAF7 100%);
	border: 1px solid rgba(237,41,56,.14);
	box-shadow: 0 1px 2px rgba(237,41,56,.04), 0 16px 36px -22px rgba(237,41,56,.18);
}
.gg-ct__head-glow{
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(360px 200px at 10% 0%, rgba(237,41,56,.18), transparent 65%),
		radial-gradient(360px 200px at 90% 100%, rgba(245,158,11,.14), transparent 65%);
}
.gg-ct__head-inner{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(18px, 2.4vw, 28px);
	align-items: center;
}
@media (max-width: 900px){ .gg-ct__head-inner{ grid-template-columns: 1fr; } }
.gg-ct__head-text{ display: flex; flex-direction: column; min-width: 0; }
.gg-ct__head-title{
	margin: 0;
	font-family: var(--gg-font-head);
	font-size: clamp(22px, 2.8vw, 36px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--gg-black, #0A0A0A);
}
.gg-ct__head-accent{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.gg-ct__head-sub{
	margin: 8px 0 0;
	font-family: var(--gg-font-body);
	font-size: clamp(13px, 1vw, 15px);
	color: var(--gg-gray-700, #374151);
	line-height: 1.55;
	max-width: 56ch;
}

.gg-ct__head-stats{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
@media (min-width: 540px){ .gg-ct__head-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gg-ct__head-stats li{
	display: flex; align-items: center; gap: 10px;
	padding: 11px 12px;
	background: rgba(255,255,255,.78);
	border: 1px solid rgba(237,41,56,.14);
	border-radius: 14px;
	backdrop-filter: blur(8px);
}
.gg-ct__head-stat-ico{
	display: grid; place-items: center;
	width: 36px; height: 36px; flex-shrink: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	color: #fff;
	font-size: 15px;
	box-shadow: 0 6px 14px -6px rgba(237,41,56,.45);
}
.gg-ct__head-stats li > span:last-child{ display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.gg-ct__head-stats strong{
	font-family: var(--gg-font-head);
	font-size: 16px;
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
}
.gg-ct__head-stats small{
	font-family: var(--gg-font-head);
	font-size: 9px;
	color: var(--gg-gray-500, #6B7280);
	font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	margin-top: 1px;
}

/* ── Section heads ──────────────────────────────────────────────────── */
.gg-ct__sec-head{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.gg-ct__sec-title{
	margin: 0;
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-lg, 18px), 1.8vw, var(--gg-text-xl, 22px));
	font-weight: 800;
	color: var(--gg-black, #0A0A0A);
	letter-spacing: -.02em;
}
.gg-ct__sec-sub{
	margin: 0;
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-sm, 14px);
	color: var(--gg-gray-500, #6B7280);
}

/* ── Cities grid ─────────────────────────────────────────────────────── */
.gg-ct__grid-wrap{ display: flex; flex-direction: column; }
.gg-ct__grid{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 20px);
	grid-auto-rows: 1fr;
}
@media (max-width: 1280px){ .gg-ct__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 940px){  .gg-ct__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px){  .gg-ct__grid{ grid-template-columns: 1fr; } }

/* ── City card ───────────────────────────────────────────────────────── */
.gg-ct__card{
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: var(--gg-white, #fff);
	border: 1px solid var(--gg-gray-200, #E5E7EB);
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: transform 280ms cubic-bezier(.16,1,.3,1), box-shadow 280ms ease, border-color 280ms ease;
}
.gg-ct__card:hover{
	transform: translateY(-5px);
	border-color: rgba(237,41,56,.18);
	box-shadow: 0 1px 2px rgba(237,41,56,.06), 0 26px 44px -22px rgba(237,41,56,.28);
}
.gg-ct__card--feature{ grid-column: span 2; }
@media (max-width: 940px){ .gg-ct__card--feature{ grid-column: span 1; } }

.gg-ct__card-link{ display: flex; flex-direction: column; height: 100%; color: inherit; }

/* — Media (city photo + overlay name) — */
.gg-ct__card-media{
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--gg-gray-200, #E5E7EB);
}
.gg-ct__card--feature .gg-ct__card-media{ aspect-ratio: 21 / 10; }
@media (max-width: 940px){ .gg-ct__card--feature .gg-ct__card-media{ aspect-ratio: 16 / 10; } }
.gg-ct__card-media img{
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.04);
	transition: transform 900ms cubic-bezier(.16,1,.3,1);
}
.gg-ct__card:hover .gg-ct__card-media img{ transform: scale(1.1); }
.gg-ct__card-veil{
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.78) 100%);
}

/* — State pin (top-left) — */
.gg-ct__card-pin{
	position: absolute; top: 14px; left: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 4px;
	padding: 5px 10px 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.96);
	color: var(--gg-red-deep, #B91C28);
	backdrop-filter: blur(8px);
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
	box-shadow: 0 6px 14px -6px rgba(15,23,42,.4);
	line-height: 1;
}
.gg-ct__card-pin i{ font-size: 11px; color: var(--gg-red, #ED2938); }

/* — Region tag (top-right) — */
.gg-ct__card-region{
	position: absolute; top: 14px; right: 14px; z-index: 2;
	padding: 4px 11px 5px;
	border-radius: 999px;
	background: rgba(0,0,0,.5);
	backdrop-filter: blur(8px);
	color: #fff;
	font-family: var(--gg-font-head);
	font-size: 10px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	border: 1px solid rgba(255,255,255,.18);
}

/* — City name overlay (bottom of image) — */
.gg-ct__card-overlay{
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 12px;
	padding: 14px clamp(14px, 1.6vw, 20px) 14px clamp(14px, 1.6vw, 20px);
	z-index: 2;
}
.gg-ct__card-title{
	margin: 0;
	font-family: var(--gg-font-head);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.025em;
	line-height: 1;
	display: flex; align-items: baseline; gap: 8px;
	text-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.gg-ct__card-title small{
	font-family: var(--gg-font-head);
	font-size: .55em;
	font-weight: 800;
	color: rgba(255,255,255,.7);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.gg-ct__card--feature .gg-ct__card-title{ font-size: clamp(26px, 2.4vw, 36px); }

.gg-ct__card-rating{
	display: inline-flex; align-items: baseline; gap: 4px;
	padding: 5px 10px 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.96);
	color: var(--gg-gray-800, #1F2937);
	font-family: var(--gg-font-head);
	font-size: 11px;
	box-shadow: 0 6px 14px -6px rgba(15,23,42,.4);
	flex-shrink: 0;
	line-height: 1;
}
.gg-ct__card-rating i{ color: #FBBF24; font-size: 11px; }
.gg-ct__card-rating strong{ font-weight: 800; color: var(--gg-black, #0A0A0A); }
.gg-ct__card-rating small{ font-weight: 600; color: var(--gg-gray-500, #6B7280); }

/* — Body (stats + CTA) — */
.gg-ct__card-body{
	padding: 16px clamp(14px, 1.6vw, 20px) 16px;
	display: flex; flex-direction: column; gap: 12px;
	flex: 1;
}
.gg-ct__card-short{
	margin: 0;
	font-family: var(--gg-font-body);
	font-size: 13px;
	color: var(--gg-gray-600, #4B5563);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gg-ct__card-stats{
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 12px;
}
.gg-ct__card--feature .gg-ct__card-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px){ .gg-ct__card--feature .gg-ct__card-stats{ grid-template-columns: repeat(2, 1fr); } }
.gg-ct__card-stats li{
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--gg-font-body);
	font-size: 12px;
	color: var(--gg-gray-600, #4B5563);
	min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gg-ct__card-stats li i{ color: var(--gg-red-deep, #B91C28); font-size: 12px; flex-shrink: 0; }
.gg-ct__card-stats li strong{ color: var(--gg-black, #0A0A0A); font-family: var(--gg-font-head); font-weight: 800; }

.gg-ct__card-cta{
	margin-top: auto;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--gg-gray-50, #F9FAFB);
	border: 1.5px solid var(--gg-gray-200, #E5E7EB);
	font-family: var(--gg-font-head);
	font-size: 11px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--gg-gray-800, #1F2937);
	transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, gap 220ms ease;
}
.gg-ct__card-cta i{ font-size: 12px; transition: transform 220ms ease; }
.gg-ct__card:hover .gg-ct__card-cta{
	background: linear-gradient(135deg, var(--gg-red, #ED2938), var(--gg-red-deep, #B91C28));
	border-color: transparent;
	color: #fff; gap: 10px;
	box-shadow: 0 12px 24px -10px rgba(237,41,56,.55);
}
.gg-ct__card:hover .gg-ct__card-cta i{ transform: translateX(2px); }

/* ── Bottom CTA ──────────────────────────────────────────────────────── */
.gg-ct__cta{
	position: relative; overflow: hidden;
	border-radius: var(--gg-r-xl, 16px);
	background: linear-gradient(135deg, var(--gg-black, #0A0A0A), var(--gg-black-soft, #141414));
}
.gg-ct__cta-glow{
	position: absolute; inset: 0;
	background:
		radial-gradient(560px 280px at 14% 120%, rgba(237,41,56,.4), transparent 70%),
		radial-gradient(500px 250px at 92% -10%, rgba(245,158,11,.28), transparent 70%);
	pointer-events: none;
}
.gg-ct__cta-inner{
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(20px, 4vw, 48px); flex-wrap: wrap;
	padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 48px);
}
.gg-ct__cta-title{
	font-family: var(--gg-font-head);
	font-size: clamp(var(--gg-text-xl, 22px), 2.6vw, var(--gg-text-2xl, 28px));
	font-weight: 800; letter-spacing: -.02em;
	color: #fff; margin: 0 0 8px; line-height: 1.15;
}
.gg-ct__cta-sub{
	font-family: var(--gg-font-body);
	font-size: var(--gg-text-base, 15px);
	color: rgba(255,255,255,.72);
	margin: 0; max-width: 520px;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
	.gg-ct__card, .gg-ct__card-media img, .gg-ct__card-cta, .gg-ct__card-cta i{ transition: none !important; animation: none !important; }
}