/* =========================================================================
   Girardot theme — main stylesheet
   Clean, mobile-first city portal. Arial system sans, light neutral ground,
   Colombian flag palette (blue primary, yellow highlights, red alerts).
   ========================================================================= */

:root {
	/* Girardot palette — Colombian flag: blue primary, yellow highlights, red alerts.
	   Flag refs: yellow #FCD116, blue #003893, red #CE1126 (tuned for readability). */
	--by-bg:        #f3f4f7;        /* light neutral page background */
	--by-surface:   #ffffff;        /* white "cards": search pill, translator dropdown */
	--by-text:      #141414;
	--by-muted:     #333333;
	--by-heading:   #10233f;        /* deep navy headings (Colombian blue) */
	--by-link:      #0a49c0;        /* readable Colombian blue link */
	--by-link-hover:#062d73;
	--by-border:    #e2e4e8;
	--by-accent:    #0a3fa0;        /* Colombian blue — prices, kickers, buttons, CTAs */
	--by-accent-dk: #062d73;        /* darker blue for button hovers */
	--by-yellow:    #fcd116;        /* Colombian yellow — featured/highlight bands */
	--by-yellow-tint:#fff7cc;       /* soft yellow surface tint */
	--by-yellow-bd: #f2d879;        /* yellow border */
	--by-yellow-ink:#7a5c00;        /* readable text on yellow */
	--by-red:       #ce1126;        /* Colombian red — sale/sold/alerts */
	--by-red-tint:  #fbe3e6;
	--by-red-ink:   #a11020;
	--by-maxw:      1180px;
	--by-gap:       34px;
	/* Default font: Arial — clean, low-curve sans. */
	--by-font:      Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* Colombian tricolor accent bar across the very top of every page. */
body::before {
	content: "";
	display: block;
	height: 5px;
	background: linear-gradient(to right,
		var(--by-yellow) 0 50%,
		var(--by-accent) 50% 75%,
		var(--by-red) 75% 100%);
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }   /* belt-and-braces: no accidental sideways scroll */

/* GTranslate: hide its own floating switcher + Google's top banner — we drive
   translation from the "Page Translator" dropdown. Keep the engine in the DOM. */
.gt_float_switcher,
.girardot-gt-engine { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; overflow: hidden; }
.skiptranslate.goog-te-banner-frame, .goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }   /* cancel the offset Google adds for its banner */

body {
	margin: 0;
	background: var(--by-bg);
	color: var(--by-text);
	font-family: var(--by-font);
	font-size: 16px;
	line-height: 1.32;
	/* Sticky footer: body fills the viewport, main grows, footer sits at bottom. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.site-main { flex: 0 0 auto; }     /* natural height, top-aligned */
.cta-band  { flex: 1 0 auto; }     /* grows to absorb leftover space (fills the gap) */
.site-footer { flex-shrink: 0; }   /* never collapses */
/* In a flex column, children keep their content min-width and can blow past the
   viewport on mobile — force them to shrink so nothing overflows sideways. */
.site-header, .site-main, .site-footer { min-width: 0; max-width: 100%; }

a { color: var(--by-link); text-decoration: underline; }
a:hover { color: var(--by-link-hover); }

img { max-width: 100%; height: auto; display: block; }

.by-container {
	max-width: var(--by-maxw);
	margin: 0 auto;
	padding: 0 20px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Header ---------- */
.site-header {
	background: var(--by-bg);   /* same tone as page; only search/dropdown are white */
	padding: 14px 0 18px;
	border-bottom: 1px solid #ccd3da;   /* the header break line from the mockup */
}
.site-header__top {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.site-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--by-heading);
	font-family: var(--by-font);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
}
.site-brand:hover { color: var(--by-heading); }
.site-brand__icon { font-size: 30px; line-height: 1; }
.site-brand__logo-img { height: 40px; width: auto; }
.site-brand__mark { display: inline-flex; align-items: center; }
.site-brand__mark svg { display: block; height: 44px; width: auto; }

.primary-nav { margin-left: auto; }
.primary-nav ul {
	list-style: none;
	display: flex;
	gap: 18px;
	margin: 0; padding: 0;
	flex-wrap: nowrap;
	white-space: nowrap;
}
.primary-nav a {
	color: var(--by-heading);
	text-decoration: none;
	font-size: 16px;
}
.primary-nav a:hover { text-decoration: underline; }
.primary-nav .nav-sep { margin-left: 22px; }   /* air between the nav and the auth cluster */
.primary-nav a.nav-btn {
	background: var(--by-accent);
	color: #fff;
	padding: 8px 16px;
	border-radius: 6px;
	font-weight: 700;
}
.primary-nav a.nav-btn:hover { background: var(--by-accent-dk); text-decoration: none; }
@media (max-width: 860px) { .primary-nav .nav-sep { margin-left: 0; } }

/* Page Translator dropdown (matches the flag list in the design) */
.page-translator { position: relative; }
.page-translator__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--by-surface);
	border: 1px solid #b9b9b6;
	border-radius: 7px;
	padding: 7px 12px;
	font-family: var(--by-font);
	font-size: 17px;
	cursor: pointer;
	color: var(--by-text);
}
.page-translator__toggle:after { content: "\25BE"; font-size: 11px; color: var(--by-muted); }
.page-translator__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 210px;
	background: var(--by-surface);
	border: 1px solid #b9b9b6;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0,0,0,.14);
	padding: 4px 0;
	z-index: 50;
	display: none;
}
.page-translator.is-open .page-translator__menu { display: block; }
.page-translator__menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 16px;
	text-decoration: none;
	color: var(--by-text);
	font-size: 17px;
}
.page-translator__menu a:hover { background: #eef0f2; }
.page-translator__flag { width: 22px; text-align: center; }

/* Search bar */
.site-search { margin-top: 16px; width: 100%; }
.site-search form {
	display: flex;
	align-items: center;
	max-width: 600px;
	margin: 0 auto;          /* centered, matching the mockup */
	background: var(--by-surface);
	border: 1px solid #c9c9c6;
	border-radius: 10px;      /* rounded rectangle, like the mockup (not a pill) */
	padding: 10px 18px;
	box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.site-search__icon {
	color: #9a9a9a;          /* thin gray magnifier */
	margin-right: 12px;
	display: inline-flex;
	align-items: center;
}
.site-search input[type="search"] {
	flex: 1;
	border: 0;
	outline: 0;
	font-family: var(--by-font);
	font-size: 18px;
	background: transparent;
	color: #555;
}
.site-search button { border: 0; background: transparent; cursor: pointer; font-size: 0; }

/* ---------- Portal columns (homepage) ---------- */
.portal {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	padding: 16px 0 6px;
}
.portal__col { min-width: 0; }
.col-title {
	font-family: var(--by-font);
	font-size: 19px;
	font-weight: 700;
	color: var(--by-heading);
	text-transform: uppercase;
	letter-spacing: .2px;
	margin: 0 0 8px;
	line-height: 1.12;
}
.col-title__sub { text-transform: none; }  /* "(Real Estate)" stays title case */
.col-title--news { font-size: 15px; letter-spacing: 0; white-space: nowrap; } /* long title — keep to one row in the 4-col grid */

/* News column: thumb + headline rows (no divider lines, matches design) */
.news-item {
	display: flex;
	gap: 10px;
	padding: 4px 0;
	align-items: flex-start;
	min-width: 0;
}
.news-item__title { min-width: 0; overflow-wrap: anywhere; }
.news-item__thumb {
	flex: 0 0 70px;
	width: 70px; height: 50px;
	overflow: hidden;
	background: #e7e7e3;
}
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-item__title { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.22; }
.news-item__title a { text-decoration: underline; }

/* Link-list columns: "Label: link (note)" rows (Tourism / Rentals / Real Estate) */
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { margin: 0 0 11px; font-size: 16px; line-height: 1.28; }
.link-list .label { font-weight: 700; color: var(--by-heading); }
.link-list .meta { color: var(--by-text); }  /* parentheticals are black in the design */

/* ---------- Daily City Photos (dated groups, no section title) ---------- */
.beach {
	margin-top: 8px;
	padding: 10px 0 12px;   /* the CTA band's own margin-top now provides the gap below */
}
.section-title--beach { margin: 26px 0 20px; text-align: center; }   /* the strip already has its own air */
.beach__days {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}
.beach__day-title {
	font-family: var(--by-font);
	font-size: 18px;
	font-weight: 400;
	color: var(--by-heading);
	margin: 0 0 8px;
}
.beach__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.beach__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e7e7e3;
	display: block;
}
.beach__photo img { width: 100%; height: 100%; object-fit: cover; }
.beach__empty { color: var(--by-muted); font-style: italic; }

/* ---------- Pre-footer CTA / featured band ---------- */
.cta-band {
	display: flex;
	align-items: center;          /* centre the cards within the (possibly tall) band */
	margin-top: 56px;             /* clear separation so page content never rushes into it */
	border-top: 1px solid #ccd3da;
	background: var(--by-yellow-tint);          /* subtle blue-gray tint, a touch deeper than the page */
	padding: 44px 0;
}
.cta-band .by-container { width: 100%; }
.cta-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.cta-card {
	background: var(--by-surface);
	border: 1px solid var(--by-border);
	border-radius: 8px;
	padding: 22px 20px;
	text-align: center;
}
.cta-card__title { font-size: 20px; font-weight: 700; color: var(--by-heading); margin: 0 0 8px; }
.cta-card__text  { font-size: 15px; color: var(--by-muted); margin: 0 0 16px; line-height: 1.35; }
.cta-btn {
	display: inline-block;
	background: var(--by-accent);
	color: #fff;
	text-decoration: none;
	padding: 9px 22px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
}
.cta-btn:hover { background: var(--by-accent-dk); color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
	margin-top: 0;
	padding: 30px 0 44px;
	text-align: center;
}
.footer-nav ul {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 30px;
	margin: 0; padding: 0;
}
.footer-nav a { color: var(--by-heading); text-decoration: none; font-size: 17px; }
.footer-nav a:hover { text-decoration: underline; }

/* ---------- Generic archive / single (sub-index + article pages) ---------- */
.page-head { padding: 24px 0 6px; }
.page-head h1 { margin: 0; font-size: 30px; font-weight: 700; color: var(--by-heading); }
.page-head__subtitle { margin: 4px 0 0; font-size: 16px; color: var(--by-muted); }
.entry-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--by-gap);
	padding: 18px 0;
}
.card {
	display: flex;
	flex-direction: column;
	background: var(--by-surface);
	border: 1px solid var(--by-border);
	border-radius: 8px;
	overflow: hidden;
}
.card__thumb {
	display: block;
	height: 190px;            /* fixed so the body is always visible */
	background: #e7e7e3;
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; }
.card__kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--by-accent); margin-bottom: 4px; }
.card__title { margin: 0 0 6px; font-size: 18px; line-height: 1.25; }
.card__title a { text-decoration: none; color: var(--by-heading); }
.card__title a:hover { color: var(--by-link); text-decoration: underline; }
.card__price { font-size: 19px; font-weight: 700; color: var(--by-accent); margin-bottom: 4px; }
.card__meta { color: var(--by-muted); font-size: 14px; margin: auto 0 0; }
.single-entry { max-width: 760px; margin: 0 auto; padding: 26px 0 40px; }
.single-entry h1 { font-size: 34px; font-weight: 700; color: var(--by-heading); margin: 6px 0 8px; line-height: 1.15; }
.single-entry__kicker { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.single-entry__kicker a { color: var(--by-accent); text-decoration: none; }
.single-entry__kicker a:hover { text-decoration: underline; }
.single-entry__kicker-sep { color: var(--by-muted); font-weight: 400; margin: 0 2px; }

/* ---------- Share bar (social buttons + copy-link) ---------- */
.share-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0;
	padding: 14px 16px;
	background: var(--by-surface);
	border: 1px solid var(--by-border);
	border-radius: 10px;
}
.share-bar__label { font-weight: 700; color: var(--by-heading); margin-right: 2px; }
.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
	flex-shrink: 0;
}
.share-btn--fb    { background: #1877f2; }
.share-btn--x     { background: #000; }
.share-btn--wa    { background: #25d366; }
.share-btn--email { background: #6b7280; }
.share-btn:hover  { filter: brightness(1.1); }
.share-bar__copy {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 260px;
	min-width: 0;
	margin-left: auto;
}
.share-bar__copy-input {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	font-family: var(--by-font);
	font-size: 14px;
	color: var(--by-muted);
	border: 1px solid #c9c9c6;
	border-radius: 6px;
	background: var(--by-bg);
}
.share-bar__copy-btn {
	flex-shrink: 0;
	background: var(--by-accent);
	color: #fff;
	border: 0;
	padding: 9px 16px;
	border-radius: 6px;
	font-family: var(--by-font);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.share-bar__copy-btn:hover { background: var(--by-accent-dk); }
.share-bar__copy-btn.is-copied { background: var(--by-accent-dk); }
@media (max-width: 560px) {
	.share-bar__copy { flex-basis: 100%; margin-left: 0; }
}
.single-entry__meta { color: var(--by-muted); font-size: 15px; margin: 0 0 18px; }

/* Hero image */
.single-entry__media { margin: 0 0 22px; }
.single-entry__media img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* Content typography */
.single-entry__content { font-size: 17px; line-height: 1.6; }
.single-entry__content p { margin: 0 0 18px; }
.single-entry__content h2 { font-size: 24px; margin: 28px 0 10px; color: var(--by-heading); }
.single-entry__content h3 { font-size: 20px; margin: 22px 0 8px; color: var(--by-heading); }
.single-entry__content ul,
.single-entry__content ol { margin: 0 0 18px; padding-left: 22px; }
.single-entry__content li { margin: 4px 0; }
.single-entry__content img { border-radius: 6px; height: auto; }
.single-entry__back { margin: 26px 0 0; }
.single-entry__back a { text-decoration: none; font-weight: 700; }

/* Comments / reviews */
.comments-area { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--by-border); }
.comments-area .comment-reply-title,
.comments-area .comments-title { font-size: 22px; color: var(--by-heading); margin: 0 0 14px; }
.comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.comment-list .comment { padding: 14px 0; border-bottom: 1px solid var(--by-border); }
.comment-list .comment-author { font-weight: 700; }
.comment-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.comment-form p { margin: 0; }
.comment-form label { font-weight: 700; color: var(--by-heading); display: block; margin-bottom: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.comment-form select {
	width: 100%;
	padding: 9px 12px;
	font-family: var(--by-font);
	font-size: 16px;
	border: 1px solid #c9c9c6;
	border-radius: 6px;
	background: var(--by-surface);
	color: var(--by-text);
}
.comment-form .form-submit input,
.comment-form input[type="submit"] {
	background: var(--by-accent);
	color: #fff;
	border: 0;
	padding: 11px 26px;
	border-radius: 6px;
	font-family: var(--by-font);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.comment-form .form-submit input:hover { background: var(--by-accent-dk); }
.comment-form-rating select { max-width: 160px; }
.review-stars { color: #e0a008; font-size: 18px; letter-spacing: 2px; margin: 0 0 6px; }

/* ---------- Front-end forms (Post Listing / Submit Photo / Profile) ---------- */
.girardot-listing-form label,
.girardot-photo-form label,
.girardot-profile__form label { font-weight: 700; color: var(--by-heading); }
.girardot-listing-form input[type="text"],
.girardot-listing-form input[type="file"],
.girardot-listing-form select,
.girardot-listing-form textarea,
.girardot-photo-form input,
.girardot-profile__form input[type="text"],
.girardot-profile__form input[type="url"],
.girardot-profile__form input[type="tel"],
.girardot-profile__form textarea {
	width: 100%;
	max-width: 520px;
	padding: 9px 12px;
	margin-top: 4px;
	font-family: var(--by-font);
	font-size: 16px;
	border: 1px solid #c9c9c6;
	border-radius: 6px;
	background: var(--by-surface);
	color: var(--by-text);
}
.girardot-listing-form button,
.girardot-photo-form button,
.girardot-profile__form button {
	background: var(--by-accent);
	color: #fff;
	border: 0;
	padding: 11px 26px;
	border-radius: 6px;
	font-family: var(--by-font);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.girardot-listing-form button:hover,
.girardot-photo-form button:hover,
.girardot-profile__form button:hover { background: var(--by-accent-dk); }
.girardot-social-fields { border: 1px solid var(--by-border); border-radius: 8px; padding: 10px 16px 4px; margin: 0 0 16px; max-width: 520px; }
.girardot-social-fields legend { font-weight: 700; color: var(--by-heading); padding: 0 6px; }

/* Clickable usernames → public profile */
.author-link { color: var(--by-link); text-decoration: underline; font-weight: 700; }
.author-link:hover { color: var(--by-link-hover); }

/* Author byline chip (avatar + "By Name" + location) under single-post titles */
.single-entry__byline { display: flex; align-items: center; gap: 14px; margin: 12px 0 8px; flex-wrap: wrap; }
.author-chip { display: flex; align-items: center; gap: 13px; text-decoration: none; padding: 8px 22px 8px 8px; border: 1px solid var(--by-border); border-radius: 999px; background: var(--by-surface); transition: border-color .12s ease, box-shadow .12s ease; min-width: 260px; }
.author-chip:hover { border-color: var(--by-accent); box-shadow: 0 1px 6px rgba(0,0,0,.09); }
.author-chip__avatar { display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #e7e7e3; }
.author-chip__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.author-chip__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.author-chip__by { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--by-muted); font-weight: 400; }
.author-chip__name { font-weight: 700; font-size: 17px; color: var(--by-heading); }
.author-chip:hover .author-chip__name { color: var(--by-accent); }
.author-chip__sub { font-size: 13px; color: var(--by-muted); }
.single-entry__date { color: var(--by-muted); font-size: 14px; }
@media (max-width: 480px) { .author-chip { min-width: 0; width: 100%; } }

/* Register popup: optional social block */
.by-auth__more { margin: 4px 0 10px; }
.by-auth__more summary { cursor: pointer; color: var(--by-accent); font-weight: 700; }
.by-auth__more p { margin: 8px 0 0; }

/* ---------- Public member profile (author.php) ---------- */
.public-profile { padding: 8px 0 24px; }
.public-profile__head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.public-profile__avatar { border-radius: 50%; flex-shrink: 0; }
.public-profile__name { margin: 0; font-size: 30px; font-weight: 700; color: var(--by-heading); }
.public-profile__location { margin: 4px 0 0; color: var(--by-muted); font-size: 16px; }
.public-profile__socials { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; padding: 0; }
.public-profile__socials a { font-weight: 700; }
.public-profile__bio { margin: 0 0 22px; font-size: 16px; max-width: 720px; }
.public-profile__business { margin: 0 0 26px; }
.public-biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 10px; }
.public-biz-card { display: block; background: var(--by-yellow-tint); border: 1px solid var(--by-yellow-bd); border-radius: 8px; overflow: hidden; text-decoration: none; }
.public-biz-card__thumb img { width: 100%; height: 140px; object-fit: cover; display: block; }
.public-biz-card__name { display: block; padding: 10px 12px 0; font-weight: 700; font-size: 17px; color: var(--by-heading); }
.public-biz-card:hover .public-biz-card__name { color: var(--by-link); text-decoration: underline; }
.public-biz-card__addr { display: block; padding: 2px 12px 12px; font-size: 14px; color: var(--by-muted); }
.public-profile__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
@media (max-width: 780px) { .public-profile__list { grid-template-columns: minmax(0, 1fr); } }
.public-profile__list li { border-bottom: 1px solid var(--by-border); }
.public-profile__list .listing-row { padding: 9px 0; }
.listing-row__body { min-width: 0; display: flex; flex-direction: column; }
.listing-row__kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--by-accent); font-weight: 700; }

.girardot-notice { padding: 12px 16px; border-radius: 6px; font-weight: 700; }
.girardot-notice--ok  { background: #e2f3ec; color: var(--by-accent-dk); }
.girardot-notice--err { background: var(--by-red-tint); color: var(--by-red-ink); }
/* Account / profile hub */
.girardot-account-card { background: var(--by-surface); border: 1px solid var(--by-border); border-radius: 8px; padding: 16px 18px; margin: 0 0 22px; }
.girardot-account-card__actions { margin: 12px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.cta-btn--ghost { background: transparent; color: var(--by-accent); border: 1px solid var(--by-accent); }
.cta-btn--ghost:hover { background: var(--by-accent); color: #fff; }
.girardot-profile__listings { list-style: none; padding: 0; margin: 8px 0 0; }
.girardot-profile__listings li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--by-border); }
.listing-row { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 1; min-width: 0; }
.listing-row__thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 6px; overflow: hidden; background: #e7e7e3; display: block; }
.listing-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-row__title { color: var(--by-link); text-decoration: underline; }
.listing-row:hover .listing-row__title { color: var(--by-link-hover); }
.listing-delete { margin: 0; }
.listing-delete__btn {
	background: transparent;
	border: 1px solid #cbb3b3;
	color: var(--by-red-ink);
	font-family: var(--by-font);
	font-size: 13px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 6px;
	cursor: pointer;
}
.listing-delete__btn:hover { background: var(--by-red-ink); border-color: var(--by-red-ink); color: #fff; }

/* ---------- Listing archives: featured strip + fast text rows ---------- */
.featured-strip { margin: 4px 0 10px; }
.featured-strip__title {
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
	color: var(--by-accent); margin: 0 0 10px;
}
.entry-grid--featured { padding: 0 0 8px; }
.archive-list { list-style: none; margin: 6px 0 0; padding: 0 0 24px; }
.archive-list__row {
	padding: 9px 0;
	border-bottom: 1px solid var(--by-border);
	font-size: 16px;
	line-height: 1.35;
}
.archive-list__row:last-child { border-bottom: 0; }
.archive-list__row .label { font-weight: 700; color: var(--by-heading); }
.archive-list__row .meta { color: var(--by-muted); }

/* ---------- Town filter on rental / real-estate archives ---------- */
.loc-filter { margin: 2px 0 14px; font-size: 15px; }
.loc-filter .label { font-weight: 700; color: var(--by-heading); }
.loc-filter a { text-decoration: none; }
.loc-filter a:hover { text-decoration: underline; }
.loc-filter a.is-active { font-weight: 700; color: var(--by-accent); text-decoration: none; }

/* ---------- Sold badge + button ---------- */
.listing-status--sold { background: var(--by-red-tint); color: var(--by-red-ink); }
.listing-sold__btn { border-color: #b8c4bd; color: var(--by-accent-dk); }
.listing-sold__btn:hover { background: var(--by-accent); border-color: var(--by-accent); color: #fff; }

/* ---------- Tour single: gallery + directions/map ---------- */
.tour-gallery h2, .tour-directions h2 { font-size: 24px; margin: 28px 0 12px; color: var(--by-heading); }
.tour-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tour-gallery__item { display: block; border-radius: 6px; overflow: hidden; background: #e7e7e3; aspect-ratio: 4/3; }
.tour-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-directions__map { margin: 14px 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--by-border); }
.tour-directions__map iframe { display: block; width: 100%; height: 340px; border: 0; }
@media (max-width: 680px) {
	.tour-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tour-directions__map iframe { height: 260px; }
}

/* ---------- Local Business Directory ---------- */
.fav-band {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	background: var(--by-yellow-tint); border: 1px solid var(--by-yellow-bd); border-radius: 10px;
	padding: 14px 18px; margin: 4px 0 18px;
}
.fav-band__label { font-weight: 700; color: var(--by-yellow-ink); white-space: nowrap; }
.fav-band__biz { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.fav-band__thumb { flex: 0 0 72px; width: 72px; height: 54px; border-radius: 6px; overflow: hidden; background: #e7e7e3; }
.fav-band__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-band__name { display: block; font-weight: 700; font-size: 17px; color: var(--by-heading); }
.fav-band__addr { display: block; font-size: 14px; color: var(--by-muted); }
.fav-band__biz:hover .fav-band__name { color: var(--by-link); text-decoration: underline; }

.side-box--interviews { max-width: 640px; margin-bottom: 22px; }
.side-box--featured { background: var(--by-yellow-tint); border-color: var(--by-yellow-bd); }
.side-box--featured .side-box__title { color: var(--by-yellow-ink); }

.biz-town { margin: 0 0 8px; }

/* ---------- Business top feature row: 3 columns on one row ---------- */
.biz-feature-row {
	display: grid;
	grid-template-columns: 1fr 1fr 0.8fr;
	gap: 28px;
	margin: 4px 0 28px;
	align-items: start;
}
.biz-feature-col {
	background: var(--by-surface);
	border: 1px solid var(--by-border);
	border-radius: 8px;
	padding: 16px 18px;
	min-width: 0;
}
.biz-feature-col__empty { color: var(--by-muted); font-size: 15px; margin: 6px 0 0; }
/* Interview cards: larger thumbnail, title, summary sample. */
.interview-card { display: block; text-decoration: none; margin: 0 0 16px; }
.interview-card:last-child { margin-bottom: 0; }
.interview-card__thumb { display: block; border-radius: 6px; overflow: hidden; background: #e7e7e3; margin-bottom: 8px; }
.interview-card__thumb img { width: 100%; height: 150px; object-fit: cover; display: block; }
.interview-card__title { display: block; font-weight: 700; font-size: 16px; color: var(--by-link); text-decoration: underline; line-height: 1.25; }
.interview-card:hover .interview-card__title { color: var(--by-link-hover); }
.interview-card__excerpt { display: block; font-size: 14px; color: var(--by-muted); margin-top: 4px; line-height: 1.35; }
/* Categories column: name + count rows. */
.biz-cat-list { list-style: none; margin: 0; padding: 0; }
.biz-cat-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--by-border); }
.biz-cat-list li:last-child { border-bottom: 0; }
.biz-cat-list a { font-weight: 700; }
.biz-cat-list__count { color: var(--by-muted); font-size: 14px; flex-shrink: 0; }
@media (max-width: 860px) {
	.biz-feature-row { grid-template-columns: minmax(0, 1fr); }
}

.biz-organize {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 8px 0 16px; font-weight: 700;
}
.biz-organize a { padding: 6px 10px; border-radius: 5px; }
.biz-organize a[aria-current="page"] { background: var(--by-accent); color: #fff; text-decoration: none; }
.biz-subindex {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px; margin: 0 0 24px; padding: 16px;
	background: var(--by-surface); border: 1px solid var(--by-border); border-radius: 6px;
}
.biz-subindex a { font-weight: 700; }
.biz-town { scroll-margin-top: 16px; }
.biz-town__empty { margin: 6px 0 18px; color: var(--by-muted); }
@media (max-width: 600px) { .biz-subindex { grid-template-columns: minmax(0, 1fr); } }
.biz-town__name {
	font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
	color: var(--by-heading); margin: 18px 0 6px;
	border-bottom: 2px solid var(--by-accent); display: inline-block; padding-bottom: 2px;
}
/* Directory table: 2 columns of businesses on desktop, 1 on mobile. */
.biz-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
}
@media (max-width: 780px) { .biz-list { grid-template-columns: minmax(0, 1fr); } }
.biz-list__row { border-bottom: 1px solid var(--by-border); }
.biz-list__row .listing-row { padding: 9px 0; }
.biz-list__body { min-width: 0; }
.biz-list__name { display: block; font-weight: 700; color: var(--by-link); text-decoration: underline; }
.biz-list__addr { display: block; font-size: 14px; color: var(--by-muted); }

/* ---------- Rentals: four official category columns ---------- */
/* Section header: title sitting on a full-width rule, with generous air
   above it so the Featured strip breathes. */
.section-title {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--by-heading);
	margin: 48px 0 24px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccd3da;
}
.rental-cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	padding: 6px 0 24px;
}
.rental-cats__title {
	font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
	margin: 0 0 6px; border-bottom: 2px solid var(--by-accent); display: inline-block; padding-bottom: 2px;
}
.rental-cats__title a { color: var(--by-heading); text-decoration: none; }
.rental-cats__title a:hover { color: var(--by-accent); }
.archive-list--tight { padding-bottom: 4px; }
.archive-list--tight .archive-list__row { font-size: 15px; padding: 7px 0; }
.rental-cats__more { margin: 6px 0 0; font-size: 14px; }
.rental-cats__more a { text-decoration: none; font-weight: 700; }
@media (max-width: 1000px) { .rental-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .rental-cats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Section intro + "avoid scams" box (Real Estate, Marketplace) ---------- */
.section-intro {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 22px;
	margin: 20px 0 8px;
}
.section-intro__about {
	background: var(--by-surface);
	border: 1px solid var(--by-border);
	border-radius: 8px;
	padding: 18px 20px;
	font-size: 16px;
	line-height: 1.45;
	display: flex;
	align-items: center;
}
.section-intro__about p { margin: 0; }
.section-intro__safety {
	background: var(--by-yellow-tint);
	border: 1px solid var(--by-yellow-bd);
	border-radius: 8px;
	padding: 16px 20px;
}
.section-intro__safety-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--by-yellow-ink); text-transform: uppercase; letter-spacing: .3px; }
.section-intro__safety ul { margin: 0; padding-left: 18px; }
.section-intro__safety li { font-size: 14px; color: var(--by-muted); margin: 0 0 5px; line-height: 1.35; }
@media (max-width: 780px) { .section-intro { grid-template-columns: minmax(0, 1fr); } }

/* Sub-headings + type pills (Types of Real Estate) */
.section-subhead { font-size: 18px; font-weight: 700; color: var(--by-heading); margin: 26px 0 10px; }
.type-pills__row { display: flex; flex-wrap: wrap; gap: 10px; }
.type-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--by-surface); border: 1px solid #c9d2c9; border-radius: 999px;
	padding: 7px 16px; text-decoration: none; font-weight: 700; color: var(--by-heading);
}
.type-pill:hover { border-color: var(--by-accent); color: var(--by-accent); }
.type-pill__count { font-size: 13px; color: #fff; background: var(--by-accent); border-radius: 999px; padding: 1px 8px; font-weight: 700; }

/* ---------- Featured Tours (prime placement w/ phone) ---------- */
.featured-tours { margin-bottom: 8px; }
.featured-tours__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.featured-tour { background: var(--by-surface); border: 1px solid var(--by-yellow-bd); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.featured-tour__media { display: block; background: #e7e7e3; }
.featured-tour__media img { width: 100%; height: 240px; object-fit: cover; display: block; }
.featured-tour__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.featured-tour__title { margin: 0; font-size: 21px; font-weight: 700; }
.featured-tour__title a { color: var(--by-heading); text-decoration: none; }
.featured-tour__title a:hover { color: var(--by-accent); }
.featured-tour__price { margin: 0; font-weight: 700; color: var(--by-accent); font-size: 17px; }
.featured-tour__loc { margin: 0; color: var(--by-muted); font-size: 14px; }
.featured-tour__phone {
	margin: 4px 0 2px; font-size: 17px; font-weight: 700;
	background: #eef7f2; border: 1px solid #cfe6da; border-radius: 8px; padding: 10px 14px;
}
.featured-tour__phone-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--by-muted); font-weight: 700; }
.featured-tour__phone a { color: var(--by-accent); text-decoration: none; }
.featured-tour__cta { margin-top: 8px; align-self: flex-start; background: var(--by-accent); color: #fff; text-decoration: none; padding: 9px 20px; border-radius: 6px; font-weight: 700; font-size: 15px; }
.featured-tour__cta:hover { background: var(--by-accent-dk); color: #fff; }
.featured-tours__empty { color: var(--by-muted); background: var(--by-surface); border: 1px dashed #c9c9c6; border-radius: 8px; padding: 16px 18px; }
@media (max-width: 700px) { .featured-tours__grid { grid-template-columns: minmax(0, 1fr); } }

/* Tourism 3-column layout */
.tour-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 6px 0 24px; }
.tour-cols__title { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin: 0 0 8px; border-bottom: 2px solid var(--by-accent); display: inline-block; padding-bottom: 2px; }
.tour-cols__title a { color: var(--by-heading); text-decoration: none; }
.tour-cols__title a:hover { color: var(--by-accent); }
.tour-cols__list { list-style: none; margin: 0; padding: 0; }
.tour-cols__list li { border-bottom: 1px solid var(--by-border); }
.tour-cols__list .listing-row { padding: 9px 0; }
.tour-cols__empty { color: var(--by-muted); }
@media (max-width: 860px) { .tour-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Marketplace banner heading ---------- */
.market-banner { margin: 26px 0 14px; text-align: center; }
.market-banner__title {
	display: inline-block; margin: 0; font-size: 24px; font-weight: 700; color: var(--by-heading);
	padding: 12px 34px; border-top: 3px solid var(--by-accent); border-bottom: 3px solid var(--by-accent);
	letter-spacing: .2px;
}
@media (max-width: 560px) { .market-banner__title { font-size: 19px; padding: 10px 16px; } }

/* ---------- News article + deep-link sidebar ---------- */
.news-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	padding: 26px 0 40px;
}
.news-layout .single-entry { max-width: none; margin: 0; padding: 0; }
.news-sidebar { min-width: 0; }
.side-box {
	background: var(--by-surface);
	border: 1px solid var(--by-border);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 0 0 20px;
}
.side-box__title {
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
	color: var(--by-muted); margin: 0 0 10px;
}
.side-row {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 0; border-top: 1px solid var(--by-border);
	text-decoration: none;
}
.side-row:first-of-type { border-top: 0; }
.side-row__body { flex: 1; min-width: 0; }
.side-row__meta { display: block; font-size: 12px; color: var(--by-muted); margin-bottom: 2px; }
.side-row__title { display: block; font-size: 15px; line-height: 1.3; color: var(--by-heading); font-weight: 700; }
.side-row:hover .side-row__title { color: var(--by-link); }
.side-row__thumb { flex: 0 0 84px; height: 60px; border-radius: 6px; overflow: hidden; background: #e7e7e3; }
.side-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-photo { display: block; text-decoration: none; }
.side-photo img { width: 100%; height: auto; border-radius: 6px; display: block; }
.side-photo__caption { display: block; font-size: 14px; color: var(--by-muted); margin-top: 6px; }
@media (max-width: 900px) {
	.news-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Quick Log In / Register popup ---------- */
body.by-auth-open { overflow: hidden; }
.by-auth { position: fixed; inset: 0; z-index: 9000; }
.by-auth__overlay { position: absolute; inset: 0; background: rgba(20, 28, 38, .55); }
.by-auth__dialog {
	position: relative;
	max-width: 400px;
	margin: 9vh auto 0;
	background: var(--by-surface);
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(0,0,0,.28);
	padding: 22px 24px 24px;
}
.by-auth__close {
	position: absolute; top: 10px; right: 12px;
	background: none; border: 0; font-size: 26px; line-height: 1;
	color: var(--by-muted); cursor: pointer;
}
.by-auth__tabs { display: flex; gap: 6px; margin: 0 0 16px; border-bottom: 1px solid var(--by-border); }
.by-auth__tab {
	background: none; border: 0; cursor: pointer;
	font-family: var(--by-font); font-size: 17px; font-weight: 700;
	color: var(--by-muted); padding: 8px 12px;
	border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.by-auth__tab.is-active { color: var(--by-heading); border-bottom-color: var(--by-accent); }
.by-auth__panel label { font-weight: 700; color: var(--by-heading); display: block; margin-bottom: 4px; }
.by-auth__panel input[type="text"],
.by-auth__panel input[type="email"],
.by-auth__panel input[type="password"] {
	width: 100%; padding: 10px 12px; font-family: var(--by-font); font-size: 16px;
	border: 1px solid #c9c9c6; border-radius: 6px; background: var(--by-surface);
}
.by-auth__panel p { margin: 0 0 12px; }
.by-auth__panel .login-submit input,
.by-auth__panel .cta-btn {
	background: var(--by-accent); color: #fff; border: 0; width: 100%;
	padding: 11px 0; border-radius: 6px; font-family: var(--by-font);
	font-size: 16px; font-weight: 700; cursor: pointer;
}
.by-auth__panel .login-submit input:hover { background: var(--by-accent-dk); }
.by-auth__hint { font-size: 14px; margin: 4px 0 0; }
.by-auth__free { font-size: 14px; color: var(--by-muted); margin: 0 0 12px; }
.by-auth__error { background: var(--by-red-tint); color: var(--by-red-ink); font-weight: 700; font-size: 14px; padding: 10px 12px; border-radius: 6px; margin: 0 0 12px; }

/* Selected-image previews on bulk upload inputs */
.upload-preview { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.upload-preview__item { position: relative; width: 96px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid var(--by-border); background: #e7e7e3; }
.upload-preview__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-preview__remove {
	position: absolute; top: 2px; right: 2px;
	width: 20px; height: 20px; line-height: 18px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(20,20,20,.65); color: #fff; font-size: 14px; font-weight: 700;
}
.upload-preview__remove:hover { background: var(--by-red-ink); }
.upload-preview__count { font-size: 14px; font-weight: 700; color: var(--by-muted); }

.girardot-points {
	background: #e2f3ec; color: var(--by-accent-dk); font-weight: 700; font-size: 15px;
	padding: 10px 14px; border-radius: 6px; margin: 0 0 12px;
}

/* Account-type cards on the Post Listing page */
.plan-cards__title { font-size: 22px; color: var(--by-heading); margin: 0 0 14px; }
.plan-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 28px;
}
.plan-card {
	position: relative;
	background: var(--by-surface);
	border: 1px solid var(--by-border);
	border-radius: 10px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.plan-card.is-current { border-color: var(--by-accent); box-shadow: 0 0 0 1px var(--by-accent); }
.plan-card__name { margin: 0; font-size: 17px; font-weight: 700; color: var(--by-heading); }
.plan-card__price { font-size: 20px; font-weight: 700; color: var(--by-accent); }
.plan-card__text { margin: 0; font-size: 14px; color: var(--by-muted); line-height: 1.45; flex: 1; }
.plan-card .cta-btn { align-self: flex-start; margin-top: 8px; padding: 7px 16px; font-size: 14px; }
.plan-card__badge {
	position: absolute; top: 12px; right: 12px;
	background: var(--by-accent); color: #fff;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
	padding: 3px 9px; border-radius: 10px;
}
@media (max-width: 780px) { .plan-cards { grid-template-columns: minmax(0, 1fr); } }

/* HQ unlock donation form (single city photo) */
.girardot-hq-box { background: var(--by-surface); border: 1px solid var(--by-border); border-radius: 10px; padding: 18px 20px; margin: 18px 0; }
.girardot-unlock-form label { font-weight: 700; color: var(--by-heading); display: block; margin-bottom: 6px; }
.girardot-unlock-form__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.girardot-unlock-form input[type="number"] {
	width: 120px;
	padding: 9px 12px;
	font-family: var(--by-font);
	font-size: 16px;
	border: 1px solid #c9c9c6;
	border-radius: 6px;
	background: var(--by-surface);
}
.listing-status { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 9px; border-radius: 11px; white-space: nowrap; }
.listing-status--publish { background: #e2f3ec; color: var(--by-accent-dk); }
.listing-status--pending { background: #fff3d6; color: var(--by-yellow-ink); }
.listing-status--private,
.listing-status--draft   { background: #ececec; color: #555; }

/* Listing details card (price / location / contact) on single listings */
.listing-card {
	background: var(--by-surface);
	border: 1px solid var(--by-border);
	border-radius: 10px;
	padding: 20px 22px;
	margin: 0 0 24px;
}
.listing-card__price { font-size: 28px; font-weight: 700; color: var(--by-accent); margin-bottom: 8px; }
.listing-card__row { margin: 4px 0; font-size: 16px; }
.listing-card__label { font-weight: 700; color: var(--by-heading); display: inline-block; min-width: 78px; }
.listing-card__contact {
	display: inline-block;
	margin-top: 12px;
	background: var(--by-accent);
	color: #fff;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: 6px;
	font-weight: 700;
}
.listing-card__contact:hover { background: var(--by-accent-dk); color: #fff; }

/* ---------- Responsive ---------- */

/* Tablets / small laptops: 4 columns become 2; beach days stack. */
@media (max-width: 1000px) {
	.portal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.beach__days { grid-template-columns: minmax(0, 1fr); }
	.beach__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrow tablets: the header stacks — nav drops below the brand and wraps. */
@media (max-width: 860px) {
	.primary-nav { width: 100%; margin-left: 0; margin-top: 6px; }
	.primary-nav ul { flex-wrap: wrap; white-space: normal; gap: 12px 18px; }
	.site-search form { max-width: 100%; }
}

/* Phones: single column everywhere. */
@media (max-width: 680px) {
	.site-header__top { gap: 12px; }
	.site-brand { font-size: 24px; }
	.primary-nav ul { font-size: 16px; }
	.site-search { margin-top: 10px; }
	.portal { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.entry-grid { grid-template-columns: minmax(0, 1fr); }
	.cta-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Small phones: city photos go 2 x 2 so they stay tappable. */
@media (max-width: 460px) {
	.beach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Message-us-to-list (WhatsApp + enquiry form) ---------- */
.wa-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: #25D366; color: #05391c; font-weight: 700;
	text-decoration: none; padding: 11px 20px; border-radius: 8px;
	border: 1px solid #1ebe5b; line-height: 1;
}
.wa-btn:hover { background: #1ebe5b; color: #05391c; }
.wa-btn::before {
	content: ""; width: 18px; height: 18px; flex: 0 0 auto;
	background: no-repeat center/contain;
	/* WhatsApp glyph (inline data URI so no external request) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2305391c'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.03c-.24.68-1.42 1.31-1.95 1.36-.5.05-1.13.07-1.83-.11-.42-.13-.96-.31-1.66-.61-2.92-1.26-4.82-4.19-4.97-4.39-.15-.2-1.2-1.59-1.2-3.03s.76-2.15 1.03-2.45c.27-.29.58-.37.77-.37.19 0 .39 0 .55.01.18.01.42-.07.66.5.24.58.82 2 .89 2.15.07.14.12.31.02.51-.09.2-.14.31-.28.48-.14.17-.29.37-.42.5-.14.14-.28.29-.12.56.16.27.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.21 1.37.27.14.43.12.58-.07.15-.19.66-.77.84-1.04.18-.27.36-.22.6-.13.24.09 1.55.73 1.81.86.27.14.44.2.51.31.07.12.07.68-.17 1.36z'/%3E%3C/svg%3E");
}
.wa-btn--sm { padding: 8px 14px; font-size: 14px; margin-top: 8px; }

.girardot-contact-list {
	margin: 26px 0 6px; padding: 20px 22px;
	background: var(--by-yellow-tint); border: 1px solid var(--by-yellow-bd);
	border-radius: 12px;
}
.girardot-contact-list__title { margin: 0 0 6px; font-size: 19px; color: var(--by-heading); }
.girardot-contact-list__lead { margin: 0 0 14px; color: var(--by-muted); }
.girardot-enquiry-form { margin-top: 14px; max-width: 520px; }
.girardot-enquiry-form label { font-weight: 700; font-size: 14px; }
.girardot-enquiry-form input[type="text"],
.girardot-enquiry-form input[type="email"],
.girardot-enquiry-form textarea {
	width: 100%; padding: 9px 11px; border: 1px solid #c9c9c6;
	border-radius: 7px; font-family: var(--by-font); font-size: 15px; background: #fff;
}
.girardot-enquiry-form .cta-btn { border: 0; cursor: pointer; }

/* ---------- Homepage: Local Business Directory band ---------- */
.biz-band {
	margin: 10px 0 30px; padding: 22px 24px;
	background: var(--by-surface); border: 1px solid var(--by-border);
	border-radius: 12px; border-top: 3px solid var(--by-accent);
}
.biz-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.biz-band__head .section-title { margin: 0; }
.biz-band__all { font-weight: 700; white-space: nowrap; }
.biz-band__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.biz-band__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.biz-card {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	border: 1px solid var(--by-border); border-radius: 10px; overflow: hidden; background: #fff;
}
.biz-card:hover { border-color: var(--by-accent); box-shadow: 0 1px 8px rgba(0,0,0,.08); }
.biz-card__thumb { display: block; }
.biz-card__thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.biz-card__body { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 14px; }
.biz-card__kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--by-accent); }
.biz-card__name { font-weight: 700; color: var(--by-heading); line-height: 1.2; }
.biz-card__loc { font-size: 13px; color: var(--by-muted); }
.biz-band__empty { color: var(--by-muted); font-style: italic; }
@media (max-width: 860px) { .biz-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .biz-band__grid { grid-template-columns: minmax(0, 1fr); } }