/* TG Directories. Uses the theme's own tokens so the two directories look like
   the site rather than like a plugin, which is how the ClassiadsPro versions
   read. No colours are hard-coded. */

.tg-dir-filters { background: var(--tg-paper); border-block: var(--tg-bw) solid var(--tg-border); }
.tg-dir-filters__row { display: grid; gap: var(--tg-sp-4); padding-block: var(--tg-sp-4); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 800px)  { .tg-dir-filters__row { grid-template-columns: 1.4fr 1.4fr 1fr 1fr auto; } }
/* The keyword box leads on a phone: it is the one control someone who knows
   what they are after will reach for. */
.tg-dir-filters__field--q { order: -1; }
.tg-dir-filters__field { margin: 0; }
.tg-dir-filters__field label { display: block; font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--tg-text-muted); margin-bottom: 4px; }
/* Inputs only. A select is NOT styled here on purpose: the theme already gives
   it the chevron, the padding that makes room for it and `appearance: none`,
   and restating `background` in a shorthand here wiped the chevron out - which
   left the distance and age-group dropdowns looking like empty text boxes. */
.tg-dir-filters__field input[type="text"],
.tg-dir-filters__field input[type="search"] {
	width: 100%; min-height: var(--tg-tap); padding: 0 var(--tg-sp-3);
	border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius);
	background-color: var(--tg-white); color: var(--tg-ink); font-size: var(--tg-fs-base);
}
.tg-dir-filters__field select { width: 100%; }
.tg-dir-filters__field input:focus, .tg-dir-filters__field select:focus {
	border-color: var(--tg-green); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.25);
}
.tg-dir-filters__actions { display: flex; align-items: center; gap: var(--tg-sp-3); margin: 0; }
.tg-dir-filters__clear { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }

.tg-dir-grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tg-dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tg-dir-grid { grid-template-columns: repeat(3, 1fr); } }

.tg-dir-card {
	display: flex; flex-direction: column; gap: var(--tg-sp-2);
	padding: 0 var(--tg-sp-4) var(--tg-sp-4); background: var(--tg-white);
	overflow: hidden;
	border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg);
	transition: border-color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease);
}
.tg-dir-card:hover { border-color: var(--tg-green); box-shadow: var(--tg-shadow); }
.tg-dir-card__link { color: inherit; }
.tg-dir-card__link:hover { text-decoration: none; }
.tg-dir-card__title { margin: 0; font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: var(--tg-fs-lg); text-transform: uppercase; line-height: 1.15; }
.tg-dir-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tg-sp-2); margin: 0; font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }
.tg-dir-chip { display: inline-block; padding: 2px var(--tg-sp-2); border-radius: var(--tg-radius-sm); background: var(--tg-green-soft); color: var(--tg-green-text); font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); }
.tg-dir-card__date { font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.tg-dir-card__fee { margin-left: auto; font-weight: var(--tg-fw-bold); color: var(--tg-ink); }
.tg-dir-card__where, .tg-dir-card__excerpt { margin: 0; font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }
.tg-dir-card__cta { margin-top: auto; padding-top: var(--tg-sp-2); font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); color: var(--tg-link); }

.tg-dir-details { margin: var(--tg-sp-5) 0; }
.tg-dir-details dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
@media (min-width: 640px) { .tg-dir-details dl { grid-template-columns: 200px 1fr; } }
.tg-dir-details dt { padding: var(--tg-sp-3) 0; font-weight: var(--tg-fw-bold); border-top: var(--tg-bw) solid var(--tg-border); }
.tg-dir-details dd { padding: var(--tg-sp-3) 0; margin: 0; border-top: var(--tg-bw) solid var(--tg-border); }
@media (max-width: 639px) { .tg-dir-details dt { padding-bottom: 0; border-bottom: 0; } .tg-dir-details dd { border-top: 0; padding-top: 2px; } }
.tg-dir-details__relay { margin-top: var(--tg-sp-4); font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }

/* ---- Submission form ---------------------------------------------------- */

.tg-dir-form { max-width: 760px; margin: 0 auto; }

/* A fieldset per group. `min-width: 0` because a fieldset refuses to shrink
   below its content's intrinsic width otherwise, which breaks the grid inside
   it on a phone. */
.tg-dir-group {
	min-width: 0; margin: 0 0 var(--tg-sp-6); padding: var(--tg-sp-5);
	border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg);
	background: var(--tg-white);
}
/* `float: left` + `width: 100%` makes a legend behave as a normal block inside
   the fieldset. Left as a real legend it is painted ON the top border, and the
   two-line version here had its intro text struck through by that border. */
.tg-dir-group legend { float: left; width: 100%; padding: 0; margin-bottom: var(--tg-sp-2); }
.tg-dir-group legend + * { clear: both; }
.tg-dir-group__title {
	display: block; font-family: var(--tg-font-head); font-weight: var(--tg-fw-black);
	font-size: var(--tg-fs-lg); text-transform: uppercase; line-height: 1.1;
}
.tg-dir-group__intro { display: block; margin-top: 2px; font-size: var(--tg-fs-sm); color: var(--tg-text-muted); max-width: 46ch; }
.tg-dir-group__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: 1fr; margin-top: var(--tg-sp-4); }
@media (min-width: 640px) { .tg-dir-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-dir-field--wide { grid-column: 1 / -1; }

.tg-dir-field { margin: 0; min-width: 0; }
.tg-dir-field label {
	display: flex; align-items: baseline; gap: var(--tg-sp-2); flex-wrap: wrap;
	margin-bottom: 5px; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm);
}
/* "optional" rather than an asterisk on everything else: most of these fields
   ARE required, so marking the exceptions is less noise than marking the rule,
   and it does not rely on spotting a symbol or on a legend elsewhere. */
.tg-dir-optional {
	font-weight: var(--tg-fw-regular); font-size: var(--tg-fs-xs);
	color: var(--tg-text-muted); text-transform: lowercase;
}
.tg-dir-field input, .tg-dir-field textarea {
	display: block; width: 100%; min-height: var(--tg-tap);
	padding: var(--tg-sp-2) var(--tg-sp-3);
	border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius);
	background-color: var(--tg-white); color: var(--tg-ink); font: inherit;
}
.tg-dir-field textarea { min-height: 140px; resize: vertical; }
.tg-dir-field select { width: 100%; }
.tg-dir-field input:focus, .tg-dir-field select:focus, .tg-dir-field textarea:focus {
	border-color: var(--tg-green); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.25);
}
/* `:user-invalid`, NOT `:invalid`. An empty required field is already
   `:invalid` on load, and `:not(:placeholder-shown)` does not save it - that
   matches when the field has no placeholder ATTRIBUTE at all, which is most of
   them - so every required box was outlined in red before anyone had typed a
   character. `:user-invalid` only applies once the field has been interacted
   with and left wrong, which is when it is useful rather than accusing. */
.tg-dir-field input:user-invalid,
.tg-dir-field textarea:user-invalid { border-color: #b32d2e; }
.tg-dir-field input:user-invalid:focus { box-shadow: 0 0 0 3px rgba(179,45,46,.2); }
.tg-dir-help { display: block; margin-top: 4px; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

/* Truly hidden, and off the tab order, without display:none - some bots skip
   anything display:none, which defeats the point of a honeypot. */
.tg-dir-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.tg-dir-form__foot {
	padding: var(--tg-sp-5); border: var(--tg-bw) solid var(--tg-green-line);
	border-radius: var(--tg-radius-lg); background: var(--tg-green-soft);
}
.tg-dir-consent { margin: 0 0 var(--tg-sp-4); }
.tg-dir-consent label { display: flex; gap: var(--tg-sp-3); align-items: flex-start; font-size: var(--tg-fs-sm); line-height: 1.45; }
.tg-dir-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--tg-green-fill); }
.tg-dir-form__submit { width: 100%; }
@media (min-width: 640px) { .tg-dir-form__submit { width: auto; min-width: 220px; } }
.tg-dir-form__note { margin: var(--tg-sp-3) 0 0; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

.tg-dir-note { padding: var(--tg-sp-4); border-radius: var(--tg-radius); margin-bottom: var(--tg-sp-4); }
.tg-dir-note--ok { background: var(--tg-green-soft); border: var(--tg-bw) solid var(--tg-green-line); }
.tg-dir-note--error { background: #fdecea; border: var(--tg-bw) solid #f5c2c0; }
.tg-dir-note ul { margin: var(--tg-sp-2) 0 0; padding-left: var(--tg-sp-5); }

/* Map. Sits between the filters and the results, full width like the old one,
   but shorter: a half-screen map pushed every result below the fold. */
.tg-dir-map-wrap { border-bottom: var(--tg-bw) solid var(--tg-border); }
#tg-dir-map { height: 340px; width: 100%; background: var(--tg-paper); z-index: 0; }
@media (max-width: 767px) { #tg-dir-map { height: 240px; } }
.tg-dir-pin { background: none; border: 0; }
.tg-dir-pin__dot {
	display: block; width: 18px; height: 18px; border-radius: 50%;
	background: var(--tg-green-fill); border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.leaflet-popup-content-wrapper { border-radius: var(--tg-radius); }
.leaflet-popup-content { margin: var(--tg-sp-3); font-family: var(--tg-font-body); }
.tg-dir-pop__title { display: block; font-weight: var(--tg-fw-bold); font-size: var(--tg-fs-sm); color: var(--tg-ink); }
.tg-dir-pop__meta { display: block; margin-top: 2px; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }
.tg-archhero__cta { margin-top: var(--tg-sp-5); }
.tg-dir-count { margin: 0 0 var(--tg-sp-4); font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }
.tg-dir-past { margin-top: var(--tg-sp-6); font-size: var(--tg-fs-sm); }
.tg-dir-single__date { font-size: var(--tg-fs-lg); font-weight: var(--tg-fw-bold); margin: 0 0 var(--tg-sp-4); }
.tg-dir-single__back { margin-top: var(--tg-sp-6); }

/* Holding image. Edge to edge at the top of the card, so it is pulled back out
   of the card's side padding rather than the padding being removed - the body
   below still needs it. */
/* 4:3, matching the holding artwork's own 1200x918. At 16:9 the circle and the
   words inside it were cropped top and bottom, and on these cards the artwork
   IS the message - it says which way round the listing is. */
.tg-dir-card__media {
	display: block; margin: 0 calc(var(--tg-sp-4) * -1) var(--tg-sp-3);
	aspect-ratio: 4 / 3; background: var(--tg-paper); overflow: hidden;
}
.tg-dir-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-dir-card > .tg-dir-card__link:first-child { margin-top: var(--tg-sp-4); }

/* Single listing: body and sidebar. One column on a phone with the sidebar
   after the listing, because someone on a listing came to read THAT, not to
   browse the sidebar first. */
.tg-dir-single { display: grid; gap: var(--tg-sp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .tg-dir-single { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--tg-sp-7); } }
.tg-dir-single__main { min-width: 0; }

.tg-dir-side { display: grid; gap: var(--tg-sp-4); }
@media (min-width: 1000px) { .tg-dir-side { position: sticky; top: calc(var(--tg-header-h) + var(--tg-sp-4)); } }
.tg-dir-side__box {
	padding: var(--tg-sp-4); background: var(--tg-white);
	border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg);
}
.tg-dir-side__box h2 {
	margin: 0 0 var(--tg-sp-3); font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold);
	text-transform: uppercase; letter-spacing: .08em; color: var(--tg-text-muted);
}
.tg-dir-side__box--cta { background: var(--tg-green-soft); border-color: var(--tg-green-line); }
.tg-dir-side__box--cta h2 { color: var(--tg-green-text); font-size: var(--tg-fs-base); text-transform: none; letter-spacing: 0; }
.tg-dir-side__box--cta p { margin: 0 0 var(--tg-sp-3); font-size: var(--tg-fs-sm); }
.tg-dir-side__list { list-style: none; margin: 0; padding: 0; }
.tg-dir-side__list li { display: flex; justify-content: space-between; gap: var(--tg-sp-3); padding: var(--tg-sp-2) 0; border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-dir-side__list li:last-child { border-bottom: 0; }
.tg-dir-side__list span { color: var(--tg-text-muted); font-size: var(--tg-fs-sm); }
.tg-dir-side__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tg-dir-side__chips .tg-dir-chip { text-decoration: none; }
.tg-dir-side__chips .tg-dir-chip:hover { background: var(--tg-green-line); }
.tg-dir-side__recent { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-sp-3); }
.tg-dir-side__recent a { display: block; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); line-height: 1.3; }
.tg-dir-side__recent span { display: block; margin-top: 2px; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }
.tg-dir-side__box--hints ul { margin: 0; padding-left: var(--tg-sp-4); }
.tg-dir-side__box--hints li { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); margin-bottom: var(--tg-sp-2); }

.tg-dir-filters__field input[type="search"] {
	width: 100%; min-height: var(--tg-tap); padding: 0 var(--tg-sp-3);
	border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius);
	background-color: var(--tg-white); color: var(--tg-ink); font-size: var(--tg-fs-base);
}