/* ==========================================================================
   City Portal Directory — front-end styles (v1.1 modern)
   ========================================================================== */

:root {
	--cpd-accent: #4f46e5;
	--cpd-accent-2: #7c3aed;
	--cpd-accent-dark: #3730a3;
	--cpd-ink: #0b1220;
	--cpd-muted: #667085;
	--cpd-line: #eaecf2;
	--cpd-bg-soft: #f6f7fb;
	--cpd-radius: 18px;
	--cpd-radius-sm: 12px;
	--cpd-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
	--cpd-shadow-hover: 0 18px 48px rgba(16,24,40,.16);
	--cpd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cpd-directory, .cpd-offers, .cpd-videos, .cpd-single, .cpd-form, .cpd-hero { font-family: var(--cpd-font); }
.cpd-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Buttons ------------------------------------------------------------------ */
.cpd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .8rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
	line-height: 1; cursor: pointer; text-decoration: none; border: 0;
	transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease;
}
.cpd-btn--primary { background: linear-gradient(135deg, var(--cpd-accent), var(--cpd-accent-2)); color: #fff; box-shadow: 0 6px 18px rgba(79,70,229,.35); }
.cpd-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; }
.cpd-btn--light { background: #fff; color: var(--cpd-ink); box-shadow: var(--cpd-shadow); }
.cpd-btn--light:hover { transform: translateY(-2px); }
.cpd-btn--small { padding: .55rem 1.05rem; font-size: .85rem; }

/* Hero --------------------------------------------------------------------- */
.cpd-hero {
	position: relative; overflow: hidden; color: #fff; text-align: center;
	padding: clamp(3.5rem, 9vw, 8rem) 20px; border-radius: 28px;
	background:
		radial-gradient(1200px 500px at 15% -10%, rgba(124,58,237,.55), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(14,165,233,.45), transparent 55%),
		linear-gradient(135deg, var(--cpd-accent), var(--cpd-accent-dark));
	background-size: cover; background-position: center;
}
.cpd-hero::after {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
	background-size: 22px 22px; opacity: .5; pointer-events: none;
}
.cpd-hero__inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.cpd-hero__title { font-size: clamp(2.2rem, 5.5vw, 3.8rem); margin: 0 0 .6rem; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.cpd-hero__subtitle { font-size: clamp(1.05rem, 2vw, 1.3rem); opacity: .94; margin: 0 0 2rem; }
.cpd-hero__search {
	display: flex; gap: .4rem; max-width: 600px; margin: 0 auto 1.3rem;
	background: rgba(255,255,255,.16); padding: .45rem; border-radius: 999px;
	backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25);
}
.cpd-hero__search input { flex: 1; padding: .85rem 1.2rem; border-radius: 999px; border: 0; font-size: 1rem; color: var(--cpd-ink); }
.cpd-hero__search input:focus { outline: 2px solid #fff; }

/* Filter bar --------------------------------------------------------------- */
.cpd-filter {
	display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.8rem; align-items: center;
	background: #fff; padding: .7rem; border-radius: 999px; border: 1px solid var(--cpd-line);
	box-shadow: var(--cpd-shadow);
}
.cpd-filter input, .cpd-filter select {
	padding: .75rem 1.1rem; border: 0; border-radius: 999px; font-size: .95rem;
	flex: 1; min-width: 150px; background: var(--cpd-bg-soft);
}
.cpd-filter input:focus, .cpd-filter select:focus { outline: 2px solid var(--cpd-accent); }

/* Grid / Masonry ----------------------------------------------------------- */
.cpd-grid { display: grid; grid-template-columns: repeat(var(--cpd-cols, 3), 1fr); gap: 1.6rem; }
.cpd-masonry { columns: var(--cpd-cols, 3); column-gap: 1.6rem; }
.cpd-masonry .cpd-card { break-inside: avoid; margin-bottom: 1.6rem; }

/* Card --------------------------------------------------------------------- */
.cpd-card {
	background: #fff; border: 1px solid var(--cpd-line); border-radius: var(--cpd-radius);
	overflow: hidden; box-shadow: var(--cpd-shadow);
	transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
	display: flex; flex-direction: column;
}
.cpd-card:hover { transform: translateY(-6px); box-shadow: var(--cpd-shadow-hover); }
.cpd-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cpd-bg-soft); }
.cpd-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cpd-card:hover .cpd-card__img img { transform: scale(1.06); }
.cpd-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--cpd-accent), var(--cpd-accent-2)); }
.cpd-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.cpd-card__title { font-size: 1.2rem; margin: 0; letter-spacing: -.01em; }
.cpd-card__title a { color: var(--cpd-ink); text-decoration: none; }
.cpd-card__title a:hover { color: var(--cpd-accent); }
.cpd-card__excerpt { color: var(--cpd-muted); font-size: .92rem; margin: 0; }
.cpd-card__loc { font-size: .85rem; color: var(--cpd-muted); }
.cpd-cat {
	display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
	background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(124,58,237,.12));
	color: var(--cpd-accent); padding: .3rem .7rem; border-radius: 999px; font-weight: 700; margin-right: .3rem;
}
.cpd-cat a { color: inherit; text-decoration: none; }
.cpd-card .cpd-btn--small { align-self: flex-start; margin-top: .3rem; }

/* List --------------------------------------------------------------------- */
.cpd-list { display: flex; flex-direction: column; gap: 1.2rem; }
.cpd-list__item {
	display: grid; grid-template-columns: 240px 1fr; gap: 1.4rem; background: #fff;
	border: 1px solid var(--cpd-line); border-radius: var(--cpd-radius); overflow: hidden;
	box-shadow: var(--cpd-shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.cpd-list__item:hover { transform: translateY(-3px); box-shadow: var(--cpd-shadow-hover); }
.cpd-list__thumb { overflow: hidden; }
.cpd-list__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpd-list__body { padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.cpd-list__title { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.cpd-list__title a { color: var(--cpd-ink); text-decoration: none; }
.cpd-list__title a:hover { color: var(--cpd-accent); }
.cpd-meta-list { list-style: none; padding: 0; margin: .3rem 0; display: flex; flex-wrap: wrap; gap: 1.1rem; color: var(--cpd-muted); font-size: .9rem; }
.cpd-meta-list a { color: var(--cpd-muted); text-decoration: none; }
.cpd-list__body .cpd-btn--small { align-self: flex-start; }

/* Map ---------------------------------------------------------------------- */
.cpd-map-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 1.4rem; }
.cpd-map { height: 560px; width: 100%; border-radius: var(--cpd-radius); z-index: 0; box-shadow: var(--cpd-shadow); }
.cpd-map__list { display: flex; flex-direction: column; gap: .6rem; max-height: 560px; overflow-y: auto; padding-right: .3rem; }
.cpd-map__list-item {
	display: block; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--cpd-line);
	border-radius: var(--cpd-radius-sm); text-decoration: none; color: var(--cpd-ink); font-weight: 600;
	transition: border-color .15s ease, transform .15s ease;
}
.cpd-map__list-item:hover { border-color: var(--cpd-accent); color: var(--cpd-accent); transform: translateX(3px); }

/* Offers ------------------------------------------------------------------- */
.cpd-offers { display: grid; grid-template-columns: repeat(var(--cpd-cols, 3), 1fr); gap: 1.6rem; }
.cpd-offer-card {
	position: relative; background: #fff; border: 1px solid var(--cpd-line); border-radius: var(--cpd-radius);
	overflow: hidden; box-shadow: var(--cpd-shadow); transition: transform .22s ease, box-shadow .22s ease;
}
.cpd-offer-card:hover { transform: translateY(-6px); box-shadow: var(--cpd-shadow-hover); }
.cpd-offer-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.cpd-offer-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cpd-offer-card__badge {
	position: absolute; top: 14px; left: 14px;
	background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff;
	font-weight: 800; padding: .4rem .9rem; border-radius: 999px; font-size: .9rem;
	box-shadow: 0 6px 16px rgba(244,63,94,.4);
}
.cpd-offer-card__body { padding: 1.2rem 1.3rem; }
.cpd-offer-card__title { margin: 0 0 .4rem; font-size: 1.15rem; }
.cpd-offer-card__title a { color: var(--cpd-ink); text-decoration: none; }
.cpd-offer-card__expiry { font-size: .82rem; color: var(--cpd-muted); }

/* Videos ------------------------------------------------------------------- */
.cpd-videos { display: grid; grid-template-columns: repeat(var(--cpd-cols, 3), 1fr); gap: 1.4rem; }
.cpd-video { position: relative; border-radius: var(--cpd-radius); overflow: hidden; box-shadow: var(--cpd-shadow); }
.cpd-video iframe { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; display: block; border: 0; }

/* Single business ---------------------------------------------------------- */
.cpd-single { display: grid; gap: 1.8rem; margin-top: 2.2rem; }
.cpd-single h3 { margin: 0 0 .9rem; font-size: 1.3rem; letter-spacing: -.01em; }
.cpd-single__info { background: var(--cpd-bg-soft); border-radius: var(--cpd-radius); padding: 1.6rem 1.8rem; border: 1px solid var(--cpd-line); }
.cpd-single__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.cpd-single__list li { display: flex; gap: .7rem; align-items: baseline; color: var(--cpd-ink); }
.cpd-single__icon { width: 1.5rem; flex-shrink: 0; }
.cpd-single__social { margin-top: 1.1rem; display: flex; gap: .9rem; }
.cpd-single__social a { color: var(--cpd-accent); font-weight: 700; text-decoration: none; }
.cpd-single__video iframe { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; border: 0; border-radius: var(--cpd-radius); }

/* Forms -------------------------------------------------------------------- */
.cpd-form { max-width: 740px; display: flex; flex-direction: column; gap: 1.1rem; }
.cpd-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.cpd-form__row { display: flex; flex-direction: column; gap: .4rem; }
.cpd-form__row label { font-weight: 600; font-size: .9rem; }
.cpd-form input, .cpd-form textarea, .cpd-form select {
	padding: .85rem 1.1rem; border: 1px solid var(--cpd-line); border-radius: var(--cpd-radius-sm);
	font-size: 1rem; font-family: inherit; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.cpd-form input:focus, .cpd-form textarea:focus, .cpd-form select:focus {
	outline: 0; border-color: var(--cpd-accent); box-shadow: 0 0 0 4px rgba(79,70,229,.12);
}
.cpd-form__row--consent label { font-weight: 400; flex-direction: row; gap: .5rem; }
.cpd-alert { padding: 1.1rem 1.3rem; border-radius: var(--cpd-radius-sm); margin-bottom: 1.6rem; }
.cpd-alert--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* Misc --------------------------------------------------------------------- */
.cpd-empty { color: var(--cpd-muted); padding: 2.5rem; text-align: center; background: var(--cpd-bg-soft); border-radius: var(--cpd-radius); }
.cpd-pagination { margin-top: 2.4rem; display: flex; justify-content: center; gap: .45rem; flex-wrap: wrap; }
.cpd-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
	padding: 0 .7rem; border: 1px solid var(--cpd-line); border-radius: var(--cpd-radius-sm);
	text-decoration: none; color: var(--cpd-ink); font-weight: 600; background: #fff;
}
.cpd-pagination .page-numbers.current { background: linear-gradient(135deg, var(--cpd-accent), var(--cpd-accent-2)); color: #fff; border-color: transparent; }
.cpd-pagination .page-numbers:hover:not(.current) { border-color: var(--cpd-accent); color: var(--cpd-accent); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 980px) {
	.cpd-grid, .cpd-offers, .cpd-videos { grid-template-columns: repeat(2, 1fr); }
	.cpd-masonry { columns: 2; }
	.cpd-map-wrap { grid-template-columns: 1fr; }
	.cpd-map__list { flex-direction: row; overflow-x: auto; max-height: none; }
}
@media (max-width: 640px) {
	.cpd-grid, .cpd-offers, .cpd-videos { grid-template-columns: 1fr; }
	.cpd-masonry { columns: 1; }
	.cpd-list__item { grid-template-columns: 1fr; }
	.cpd-form__grid { grid-template-columns: 1fr; }
	.cpd-hero__search { flex-direction: column; background: transparent; border: 0; padding: 0; }
	.cpd-hero__search input { width: 100%; }
}