/* London Free Guide — Free Spots directory. Built on tokens.css + home.css.
   Text-forward, category-grouped, searchable. */

/* ---------- hero ---------- */
.dir-hero { background: var(--lfg-pure-black); position: relative; overflow: hidden; }
[data-theme="light"] .dir-hero { background: linear-gradient(180deg, #efe8dc 0%, #f4f0ea 100%); border-bottom: 1px solid var(--lfg-white-08); }
[data-theme="light"] .dir-hero::before { background: radial-gradient(circle, color-mix(in srgb, var(--lfg-accent) 14%, transparent) 0%, transparent 68%); }
[data-theme="light"] .dir-eyebrow { color: var(--lfg-white); }
[data-theme="light"] .dir-title { color: var(--lfg-white); }
[data-theme="light"] .dir-sub { color: var(--lfg-white-70); }
.dir-hero::before { content: ""; position: absolute; top: -40%; right: -8%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lfg-accent) 30%, transparent) 0%, transparent 68%); pointer-events: none; }
.dir-hero-inner { position: relative; padding: 50px 0 40px; }
.dir-eyebrow { font-family: var(--lfg-font-hand); color: #fff; font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 10px; }
.dir-title { font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; color: #fff; line-height: .96; font-size: clamp(2.3rem, 5.5vw, 4rem); max-width: 18ch; margin: 0 0 16px; text-wrap: balance; }
.dir-title .r { color: var(--lfg-accent); }
.dir-sub { color: rgba(255,255,255,.82); font-size: 1.04rem; line-height: 1.55; max-width: 60ch; }

/* ---------- sticky search + category bar ---------- */
.dir-bar { position: sticky; top: 58px; z-index: 30; background: color-mix(in srgb, var(--lfg-black) 92%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--lfg-white-08); padding: 14px 0 12px; }
.dir-search { display: flex; align-items: center; gap: 10px; background: #161616; border: 1px solid var(--lfg-white-15); border-radius: var(--lfg-radius-md); padding: 0 14px; height: 46px; margin-bottom: 12px; max-width: 520px; }
[data-theme="light"] .dir-search { background: #fff; }
.dir-search:focus-within { border-color: var(--lfg-white-30); }
.dir-search .mag { font-size: 1.15rem; color: var(--lfg-white-50); }
.dir-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--lfg-white); font: inherit; font-size: .92rem; }
.dir-search input::placeholder { color: var(--lfg-white-30); }
.dir-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dir-chips::-webkit-scrollbar { display: none; }
.dir-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--lfg-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: .7rem; padding: .5em .85em; border-radius: var(--lfg-radius-pill); background: var(--lfg-white-08); color: var(--lfg-white-70); border: 1px solid transparent; white-space: nowrap; transition: background .15s, color .15s; }
.dir-chip:hover { color: var(--lfg-white); }
.dir-chip.on { background: var(--lfg-accent); color: #fff; }
.dir-chip-n { font-weight: 600; font-size: .82em; opacity: .7; }

/* ---------- result line ---------- */
.dir-main { padding: 26px 0 40px; }
.dir-resultline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-weight: 500; font-size: .9rem; color: var(--lfg-white-70); flex-wrap: wrap; }
.dir-clear { font-weight: 600; font-size: .82rem; color: var(--lfg-white-50); text-decoration: underline; text-underline-offset: 3px; }
.dir-clear:hover { color: var(--lfg-white); }

/* ---------- category group ---------- */
.dir-group { padding: 8px 0 30px; scroll-margin-top: 130px; }
.dir-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 18px; }
.dir-group-headL { display: flex; align-items: baseline; gap: 12px; border-top: 3px solid var(--lfg-accent); padding-top: 14px; min-width: 0; }
.dir-group-h { font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; font-size: var(--lfg-text-h2); line-height: 1; }
.dir-group-n { white-space: nowrap; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lfg-white-50); }
.dir-group-all { flex-shrink: 0; align-self: center; font-family: var(--lfg-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--lfg-accent); white-space: nowrap; }
.dir-group-all:hover { color: var(--lfg-white); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .dir-group-all:hover { color: var(--lfg-black); }
/* bottom "see all" — full-width tap target under the 6-card preview */
.dir-group-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 13px 16px; border: 1px dashed var(--lfg-white-15); border-radius: 12px; background: transparent; font-family: var(--lfg-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--lfg-white-70); transition: border-color .15s, color .15s, background .15s; }
.dir-group-more:hover { border-color: var(--lfg-accent); color: var(--lfg-accent); background: color-mix(in srgb, var(--lfg-accent) 7%, transparent); }
[data-theme="light"] .dir-group-more { border-color: rgba(0,0,0,.14); color: var(--lfg-black-70, rgba(0,0,0,.62)); }

/* ---------- grid + cards ---------- */
.dir-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .dir-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (min-width: 980px) { .dir-grid { grid-template-columns: 1fr 1fr 1fr; } }
.dir-card { display: flex; flex-direction: column; background: #141414; border: 1px solid var(--lfg-white-08); border-radius: 14px; padding: 17px 18px; transition: border-color .15s, transform .15s; min-width: 0; position: relative; }
[data-theme="light"] .dir-card { background: #fff; }
.dir-card:hover { border-color: var(--lfg-white-15); transform: translateY(-2px); }
/* ---- photo banner (pilot: only spots with a sourced image) ---- */
.dir-card.has-photo { padding-top: 0; }
/* exact 12:5 banner: source images are pre-cropped to this ratio so object-fit
   never has to guess. Box ratio == image ratio at every column width. ~160px tall
   at the 3-col desktop card width (was a fixed 158px). Drifts to Lane A cleanly. */
.dir-card-photo { margin: 0 -18px 14px; aspect-ratio: 12 / 5; overflow: hidden; border-radius: 14px 14px 0 0; background: #1c1c1c; }
.dir-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.dir-card.has-photo:hover .dir-card-photo img { transform: scale(1.04); }
.dir-card.has-photo > .save-btn { background: rgba(0,0,0,.45); color: #fff; border-color: rgba(255,255,255,.32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dir-card.has-photo > .save-btn:hover { background: rgba(0,0,0,.62); }
.dir-card.has-photo > .save-btn.on { background: var(--lfg-accent); color: #fff; border-color: var(--lfg-accent); }
.dir-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
.dir-free { font-family: var(--lfg-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .56rem; padding: .36em .62em; border-radius: var(--lfg-radius-pill); background: #2ECC40; color: #06210b; }
.dir-free.soft { background: var(--lfg-white-08); color: var(--lfg-white-70); }
.dir-cat-tag { white-space: nowrap; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .54rem; color: var(--lfg-accent); border: 1px solid color-mix(in srgb, var(--lfg-accent) 40%, transparent); padding: .34em .56em; border-radius: var(--lfg-radius-pill); }
.dir-pillar-tag { white-space: nowrap; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .54rem; color: #fff; background: var(--lfg-accent); padding: .34em .56em; border-radius: var(--lfg-radius-pill); }
.dir-name { font-family: var(--lfg-font-head); font-weight: 700; text-transform: uppercase; font-size: 1.16rem; line-height: 1.14; margin-bottom: 10px; text-wrap: balance; }
.dir-loc { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; font-size: .75rem; color: var(--lfg-white-50); margin-bottom: 10px; line-height: 1.35; }
.dir-loc .pin { color: var(--lfg-accent); flex-shrink: 0; }
/* Lane B: every card's description occupies a fixed 3-line block — reserved via
   min-height so a 1-line and a 3-line spot read at the same height (uniform text
   cards), and capped via line-clamp so a long one never overflows. A photo card
   is then exactly a text card + one banner. 4.5em = line-height 1.5 x 3 lines. */
.dir-desc { color: var(--lfg-white-70); font-size: .86rem; line-height: 1.5; text-wrap: pretty; margin-bottom: 11px; min-height: 4.5em; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dir-note { display: inline-block; align-self: flex-start; font-weight: 500; font-size: .68rem; color: var(--lfg-white-50); background: var(--lfg-white-08); padding: .34em .6em; border-radius: 6px; margin-bottom: 11px; }
.dir-go { margin-top: auto; font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lfg-accent); }
.dir-card:hover .dir-go { text-decoration: underline; text-underline-offset: 3px; }

.dir-empty { color: var(--lfg-white-70); padding: 40px 0; font-size: .95rem; text-align: center; }
.dir-link { color: var(--lfg-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- save button on a directory card (no image behind it, so re-skin
   the shared .save-btn to read against the card surface, both themes) ---------- */
.dir-card-top { padding-right: 40px; }
.dir-card > .save-btn {
  top: 13px; right: 13px; width: 30px; height: 30px;
  background: var(--lfg-white-08); color: var(--lfg-white-75, var(--lfg-white-70));
  border-color: var(--lfg-white-15); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dir-card > .save-btn:hover { background: var(--lfg-white-15); }
.dir-card > .save-btn.on { background: var(--lfg-accent); color: #fff; border-color: var(--lfg-accent); }
[data-theme="light"] .dir-card > .save-btn { background: rgba(0,0,0,.05); color: rgba(0,0,0,.55); border-color: rgba(0,0,0,.12); }
[data-theme="light"] .dir-card > .save-btn:hover { background: rgba(0,0,0,.09); }
[data-theme="light"] .dir-card > .save-btn.on { background: var(--lfg-accent); color: #fff; border-color: var(--lfg-accent); }