/* =====================================================================
   GoldenTrail — components.css
   Buttons, cards, panels, timelines, tabs, accordions, tables, forms…
   A broad kit so every page can be composed differently.
   ===================================================================== */

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.55em; padding:.85em 1.5em; border-radius: var(--r-pill); font-weight:600; font-size:.95rem; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast); }
.btn svg { width:1.1em; height:1.1em; }
.btn--primary { background: var(--forest); color:#fff; box-shadow: 0 12px 26px -14px rgba(51,80,60,.9); }
.btn--primary:hover { background: var(--forest-deep); transform: translateY(-2px); }
.btn--clay { background: var(--clay); color:#fff; }
.btn--clay:hover { background:#a85d39; transform: translateY(-2px); }
.btn--outline { border:1.6px solid var(--forest); color: var(--forest-deep); }
.btn--outline:hover { background: var(--forest); color:#fff; }
.btn--ghost { background: rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn--ghost:hover { background: rgba(255,255,255,.24); }
.btn--soft { background: var(--cream); color: var(--forest-deep); }
.btn--soft:hover { background: var(--sand); }
.arrow-link { display:inline-flex; align-items:center; gap:.45em; font-weight:600; color: var(--clay); }
.arrow-link svg { width:1em; transition: transform var(--t-fast); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ---------- chips / badges / pills ---------- */
.chip { display:inline-flex; align-items:center; gap:.4em; font-size:.78rem; font-weight:600; padding:.42em .9em; border-radius:var(--r-pill); background: var(--cream); color: var(--bark); }
.chip--sage { background: rgba(126,155,107,.2); color: var(--forest-deep); }
.chip--clay { background: rgba(194,115,74,.16); color: var(--clay); }
.chip--sand { background: var(--sand); color: var(--bark); }
.tag-row { display:flex; flex-wrap:wrap; gap:.5rem; }

/* ---------- generic cards ---------- */
.card { background: var(--bone); border-radius: var(--r-lg); border:1px solid var(--line); box-shadow: var(--sh-1); overflow:hidden; transition: transform var(--t), box-shadow var(--t); display:flex; flex-direction:column; }
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.card__media { aspect-ratio: 16/11; overflow:hidden; position:relative; }
.card__media img, .card__media svg { width:100%; height:100%; object-fit:cover; transition: transform 700ms var(--ease); }
.card:hover .card__media img, .card:hover .card__media svg { transform: scale(1.06); }
.card__pin { position:absolute; top:14px; left:14px; background: rgba(34,56,42,.82); color:#fff; font-size:.72rem; font-weight:600; padding:.35em .8em; border-radius:var(--r-pill); backdrop-filter: blur(4px); }
.card__body { padding:22px 24px 26px; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card__body h3 { font-size:1.32rem; }
.card__foot { display:flex; gap:1rem; align-items:center; margin-top:auto; padding-top:.7rem; font-size:.82rem; color: var(--muted); }
.card__foot svg { width:1.05em; color: var(--sage); }

/* editorial / story card (text-forward) */
.entry { display:grid; gap:.6rem; }
.entry__media { border-radius: var(--r-md); overflow:hidden; aspect-ratio:16/10; box-shadow: var(--sh-1); }
.entry__media img, .entry__media svg { width:100%; height:100%; object-fit:cover; transition: transform var(--t); }
.entry:hover .entry__media img, .entry:hover .entry__media svg { transform: scale(1.05); }
.entry__cat { font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color: var(--clay); font-weight:600; }
.entry h3 { font-size:1.3rem; transition: color var(--t-fast); }
.entry:hover h3 { color: var(--clay); }
.entry p { font-size:.94rem; }
.entry__by { font-size:.8rem; color: var(--muted); }

/* overlapping / overlay tile */
.tile { position:relative; border-radius: var(--r-lg); overflow:hidden; min-height:260px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.tile img, .tile svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform var(--t); }
.tile::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(34,56,42,0) 35%, rgba(34,56,42,.85)); }
.tile:hover img, .tile:hover svg { transform: scale(1.07); }
.tile__label { padding:24px; }
.tile__label small { text-transform:uppercase; letter-spacing:.15em; font-size:.68rem; opacity:.85; }
.tile__label h3 { color:#fff; margin-top:.2rem; }

/* feature panel — floating block over colour */
.panel { background: var(--bone); border-radius: var(--r-lg); padding: clamp(24px,3.4vw,42px); box-shadow: var(--sh-1); border:1px solid var(--line); }
.panel--lift { box-shadow: var(--sh-2); }
.panel--sage { background: rgba(126,155,107,.12); border-color: rgba(126,155,107,.3); }

/* stat / fact ---------- */
.fact b { font-family: var(--ff-display); font-size: clamp(2.2rem,4vw,3.2rem); color: var(--forest); display:block; line-height:1; }
.bg-forest .fact b { color: var(--sand-deep); }
.fact span { font-size:.9rem; color: var(--muted); }
.bg-forest .fact span { color: rgba(255,255,255,.72); }

/* ---------- icon feature ---------- */
.feature { display:flex; flex-direction:column; gap:.6rem; }
.feature__ic { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; }
.feature__ic svg { width:27px; }
.ic-sage { background: rgba(126,155,107,.22); color: var(--forest-deep); }
.ic-clay { background: rgba(194,115,74,.18); color: var(--clay); }
.ic-sand { background: var(--sand); color: var(--bark); }
.ic-forest{ background: rgba(51,80,60,.14); color: var(--forest); }

/* ---------- checklist ---------- */
.checklist { display:grid; gap:.8rem; }
.checklist li { display:flex; gap:.75rem; align-items:flex-start; color:#51493d; }
.checklist li svg { width:23px; flex:none; color: var(--sage); margin-top:.1em; }
.checklist--card li { background: var(--bone); border:1px solid var(--line); border-radius: var(--r-sm); padding:.9rem 1rem; box-shadow: var(--sh-1); }

/* ---------- timeline ---------- */
.timeline { position:relative; padding-left:38px; }
.timeline::before { content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background: linear-gradient(var(--sage), var(--clay)); }
.timeline li { position:relative; padding-bottom:1.9rem; }
.timeline li::before { content:""; position:absolute; left:-38px; top:2px; width:24px; height:24px; border-radius:50%; background: var(--bone); border:5px solid var(--sage); }
.timeline li:nth-child(even)::before { border-color: var(--clay); }
.timeline small { text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:600; color: var(--clay); }
.timeline h4 { color: var(--forest-deep); margin-top:.1rem; }

/* ---------- accordion ---------- */
.accordion { border-top:1px solid var(--line); }
.acc { border-bottom:1px solid var(--line); }
.acc__head { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; padding:1.25rem 0; font-family: var(--ff-display); font-size:1.16rem; color: var(--forest-deep); }
.acc__head .pm { width:30px; height:30px; flex:none; border-radius:50%; background: var(--cream); display:grid; place-items:center; transition: background var(--t-fast); }
.acc__head .pm svg { width:16px; transition: transform var(--t-fast); color: var(--clay); }
.acc.is-open .acc__head .pm { background: var(--sage); }
.acc.is-open .acc__head .pm svg { transform: rotate(45deg); color:#fff; }
.acc__panel { max-height:0; overflow:hidden; transition: max-height var(--t); }
.acc__panel p { padding-bottom:1.25rem; }

/* ---------- tabs ---------- */
.tabs__list { display:flex; flex-wrap:wrap; gap:.5rem; padding:.4rem; background: var(--cream); border-radius: var(--r-pill); width:max-content; max-width:100%; }
.tabs__btn { padding:.6em 1.3em; border-radius: var(--r-pill); font-weight:600; font-size:.9rem; color: var(--bark); transition: background var(--t-fast), color var(--t-fast); }
.tabs__btn[aria-selected="true"] { background: var(--forest); color:#fff; }
.tabs__panel { display:none; margin-top:1.8rem; }
.tabs__panel.is-active { display:block; animation: fade-up .5s var(--ease); }

/* ---------- comparison / split-screen ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,5vw,72px); align-items:center; }
.split--reverse .split__media { order:2; }
.split__media { border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-2); position:relative; }
.split__media img, .split__media svg { width:100%; aspect-ratio:4/3.4; object-fit:cover; }
@media (max-width:820px){ .split { grid-template-columns:1fr; } .split--reverse .split__media{ order:0; } }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.compare__col { background: var(--bone); border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px,3vw,34px); }
.compare__col--good { border-color: rgba(126,155,107,.5); background: rgba(126,155,107,.08); }
.compare__col h4 { display:flex; align-items:center; gap:.5em; }
@media (max-width:660px){ .compare { grid-template-columns:1fr; } }

/* ---------- data table ---------- */
.tbl { width:100%; border-collapse:collapse; background: var(--bone); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--sh-1); }
.tbl th, .tbl td { padding:.95rem 1.1rem; text-align:left; font-size:.92rem; border-bottom:1px solid var(--line); }
.tbl thead th { background: var(--forest); color:#fff; font-weight:600; font-family: var(--ff-body); letter-spacing:.02em; }
.tbl tbody tr:last-child td, .tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr:nth-child(even) { background: rgba(244,238,226,.5); }
.tbl td b { color: var(--forest-deep); }
.tbl-scroll { overflow-x:auto; }

/* ---------- callout / note ---------- */
.note { border-radius: var(--r-md); padding: clamp(20px,3vw,32px); background: var(--cream); border-left:5px solid var(--sage); }
.note--clay { background: rgba(194,115,74,.1); border-left-color: var(--clay); }
.note--forest { background: rgba(51,80,60,.08); border-left-color: var(--forest); }
.note h4 { display:flex; align-items:center; gap:.5em; }
.note__ic { width:28px; height:28px; color: var(--clay); flex:none; }
.pull { font-family: var(--ff-display); font-size: clamp(1.4rem,3vw,2.1rem); line-height:1.32; color: var(--forest-deep); }
.pull span { color: var(--clay); }

/* ---------- progress / meter ---------- */
.meter { display:grid; gap:.4rem; }
.meter__top { display:flex; justify-content:space-between; font-size:.86rem; }
.meter__bar { height:9px; border-radius: var(--r-pill); background: var(--cream); overflow:hidden; }
.meter__fill { height:100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--sage), var(--clay)); width:0; transition: width 1s var(--ease); }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:.45rem; }
.field label { font-size:.85rem; font-weight:600; color: var(--ink); }
.field input, .field textarea, .field select { padding:.85em 1em; border-radius: var(--r-sm); border:1.5px solid var(--line); background:#fff; font:inherit; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sage); box-shadow: var(--ring); outline:none; }
.field textarea { min-height:150px; resize:vertical; }
.form-card { background: var(--bone); border-radius: var(--r-lg); padding: clamp(24px,4vw,44px); box-shadow: var(--sh-1); border:1px solid var(--line); }
.form-note { font-size:.84rem; color: var(--muted); }
.form-msg { display:none; margin-top:1rem; padding:.9em 1.1em; border-radius: var(--r-sm); font-size:.9rem; }
.form-msg.show { display:block; }
.form-msg--ok { background: rgba(126,155,107,.2); color: var(--forest-deep); }
.form-msg--err { background: rgba(194,115,74,.18); color: var(--clay); }

/* ---------- prose (legal & long-form) ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size:1.7rem; margin-top:2.4rem; }
.prose h3 { font-size:1.25rem; margin-top:1.6rem; }
.prose p, .prose li { color:#51493d; }
.prose ul { margin:1rem 0; display:grid; gap:.5rem; }
.prose ul li { position:relative; padding-left:1.4rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.7em; width:7px; height:7px; border-radius:2px; background: var(--sage); }
.prose a { color: var(--clay); text-decoration:underline; text-underline-offset:3px; }
.prose hr { border:0; height:1px; background: var(--line); margin:2.2rem 0; }
.toc { background: var(--cream); border-radius: var(--r-md); padding:22px 26px; position:sticky; top:96px; }
.toc h4 { margin-bottom:.6rem; }
.toc a { display:block; padding:.3rem 0; font-size:.92rem; color: var(--forest-deep); }
.toc a:hover { color: var(--clay); }

/* ---------- cookie preferences ---------- */
.cookie-bar { position:fixed; left:50%; bottom:22px; transform: translateX(-50%) translateY(160%); width:min(94vw,760px); background: var(--bone); border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); padding:22px 24px; z-index:240; transition: transform var(--t); }
.cookie-bar.show { transform: translateX(-50%) translateY(0); }
.cookie-bar__row { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.cookie-bar p { flex:1; min-width:220px; font-size:.9rem; }
.cookie-bar .actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-toggle { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.switch { width:48px; height:28px; border-radius:var(--r-pill); background: var(--sand-deep); position:relative; flex:none; transition: background var(--t-fast); }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition: transform var(--t-fast); }
.switch[aria-checked="true"] { background: var(--sage); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }

/* ---------- curved divider ---------- */
.divider-top, .divider-bottom { display:block; width:100%; height:auto; line-height:0; }

/* ---------- breadcrumbs ---------- */
.crumbs { display:flex; gap:.5rem; align-items:center; font-size:.82rem; color: rgba(255,255,255,.82); margin-bottom:1.3rem; flex-wrap:wrap; }
.crumbs a:hover { color:#fff; text-decoration:underline; }
.crumbs svg { width:.78em; opacity:.6; }
.crumbs--dark { color: var(--muted); }
.crumbs--dark a { color: var(--forest-deep); }