/* Map Studio features: the catalogue (map-studio/features.html) and the articles (map-studio/<slug>.html).
   Built by tools/features.php; colours from site.css / light.css, so both looks work. */

/* Topic colours (icon tiles) */
.fc-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 138, 31, .12); color: var(--accent); }
.fc-ic .icon { width: 20px; height: 20px; }
.fc-ic--places { background: rgba(255, 138, 31, .13); color: #ff9a3c; }
.fc-ic--shapes { background: rgba(95, 224, 160, .12); color: #5fe0a0; }
.fc-ic--look { background: rgba(255, 120, 170, .12); color: #ff8fb8; }
.fc-ic--stories { background: rgba(120, 170, 255, .13); color: #8fb4ff; }
.fc-ic--privacy { background: rgba(190, 170, 255, .13); color: #c2b0ff; }
.fc-ic--work { background: rgba(255, 210, 110, .13); color: #ffd36e; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .fc-ic--places { color: #c9520a; }
	:root:not([data-theme="dark"]) .fc-ic--shapes { color: #12865a; }
	:root:not([data-theme="dark"]) .fc-ic--look { color: #c23a73; }
	:root:not([data-theme="dark"]) .fc-ic--stories { color: #2f62c9; }
	:root:not([data-theme="dark"]) .fc-ic--privacy { color: #6a4fd1; }
	:root:not([data-theme="dark"]) .fc-ic--work { color: #a46c00; }
}
:root[data-theme="light"] .fc-ic--places { color: #c9520a; }
:root[data-theme="light"] .fc-ic--shapes { color: #12865a; }
:root[data-theme="light"] .fc-ic--look { color: #c23a73; }
:root[data-theme="light"] .fc-ic--stories { color: #2f62c9; }
:root[data-theme="light"] .fc-ic--privacy { color: #6a4fd1; }
:root[data-theme="light"] .fc-ic--work { color: #a46c00; }

/* Breadcrumb */
.fa-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: var(--muted); font-size: 14px; }
.fa-crumbs a { color: var(--ink-2); text-decoration: none; }
.fa-crumbs a:hover { color: var(--accent); }

/* ---------- Catalogue ---------- */
.fk-hero { padding: 64px 0 10px; }
.fk-hero h1 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; }
.fk-hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--accent), #ffd2b3 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fk-hero .lead { max-width: 60ch; margin: 16px 0 0; color: var(--ink-2); font-size: 18px; }
.fk-tools { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fk-search { position: relative; flex: 1 1 360px; display: flex; align-items: center; }
.fk-search .icon { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.fk-search input { width: 100%; height: 52px; padding: 0 18px 0 46px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--glass); color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.fk-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 138, 31, .16); }
.fk-seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 14px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.fk-seg button, .fk-chips button { border: 0; cursor: pointer; font: inherit; }
.fk-seg button { min-width: 64px; padding: 0 16px; border-radius: 10px; background: transparent; color: var(--ink-2); font-weight: 650; font-size: 14px; }
.fk-seg button[aria-pressed="true"] { background: var(--glass-2); color: var(--ink); box-shadow: 0 1px 0 var(--line-2), inset 0 0 0 1px var(--line-2); }
.fk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fk-chips button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px; background: var(--glass); color: var(--ink-2); font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, color .15s; }
.fk-chips button .icon { width: 16px; height: 16px; }
.fk-chips button:hover { color: var(--ink); }
.fk-chips button[aria-pressed="true"] { background: rgba(255, 138, 31, .14); color: var(--accent-2); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .4); }

.fk-list { padding: 30px 0 110px; }
.fk-group { margin-top: 46px; scroll-margin-top: 100px; }
.fk-group[hidden] { display: none; }
.fk-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.fk-group-head h2 { font-size: 24px; font-weight: 800; }
.fk-group-head p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.fk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .fk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fk-grid { grid-template-columns: minmax(0, 1fr); } }
.fk-none { margin-top: 40px; color: var(--muted); text-align: center; }

/* One feature card */
.fc { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.fc[hidden] { display: none; }
a.fc:hover { transform: translateY(-2px); background: var(--glass-2); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .45), 0 18px 34px -24px rgba(0, 0, 0, .6); }
.fc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fc-title { font-size: 17px; color: var(--heading, #fff); }
.fc-line { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.fc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--accent); font-size: 14px; font-weight: 650; }
.fc-more .icon { width: 15px; height: 15px; transition: transform .2s var(--ease); }
a.fc:hover .fc-more .icon { transform: translateX(3px); }
.fc--soon .fc-more { color: var(--muted); font-weight: 500; }
/* A picture at the top of a card (overviews of features and guides): edge to edge inside the card's 1 px line. */
.fc-shot { display: block; margin: -17px -17px 8px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; background: var(--bg-2, #111); box-shadow: inset 0 -1px 0 var(--line); }
.fc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .4s var(--ease); }
a.fc:hover .fc-shot img { transform: scale(1.04); }

/* ---------- Article ---------- */
.fa-hero { padding: 56px 0 34px; }
.fa-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fa-hero h1 { margin: 18px 0 14px; font-size: clamp(36px, 4.6vw, 58px); font-weight: 800; }
.fa-hero .lead { max-width: 64ch; color: var(--ink-2); font-size: 19px; }
.fa-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.fa-live { padding-bottom: 24px; }
.fa-live .devenzi-map-map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-2); background: #fff; color: #1d1814; color-scheme: light; }
.fa-caption { display: flex; align-items: center; gap: 8px; margin: 14px 4px 0; color: var(--muted); font-size: 14px; }
.fa-caption .icon { flex: none; width: 16px; height: 16px; color: var(--accent); }

.fa-section { padding: 80px 0; }
.fa-head { max-width: 680px; margin: 0 auto 34px; text-align: center; }
.fa-head--left { margin: 0 0 24px; text-align: left; }
.fa-head h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
.fa-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .fa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fa-cards { grid-template-columns: minmax(0, 1fr); } }
.fa-card { padding: 20px; border-radius: var(--radius); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.fa-card h3 { margin: 14px 0 6px; font-size: 17px; }
.fa-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.fa-card-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 138, 31, .12); color: var(--accent); }
.fa-card-ic .icon { width: 20px; height: 20px; }

.fa-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .fa-split { grid-template-columns: minmax(0, 1fr); } }
.fa-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 18px; }
.fa-steps li { position: relative; padding-left: 52px; color: var(--ink-2); counter-increment: s; }
.fa-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #ffb347, #ff7a12 55%, #e8520c); color: #170b04; font-weight: 800; }
.fa-steps b { color: var(--heading, #fff); }
.fa-shot { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-2); }
.fa-shot img { display: block; width: 100%; height: auto; }

.fa-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.fa-faq details { padding: 4px 20px; border-radius: 14px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.fa-faq summary { padding: 14px 0; font-weight: 700; cursor: pointer; color: var(--heading, #fff); }
.fa-faq p { margin: 0 0 16px; color: var(--ink-2); }

.fa-uses { max-width: 860px; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fa-uses li { padding: 10px 18px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-weight: 600; }

.fa-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; color: var(--muted); font-size: 14px; }
.fa-more > span { margin-right: 4px; }
.fa-chip { padding: 6px 14px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-weight: 600; text-decoration: none; }
.fa-chip:hover { color: var(--accent); }
.fa-chip.is-soon { opacity: .6; }
.fa-chip--all { color: var(--accent); }

.fa-cta { padding: 20px 0 110px; }
.fa-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 44px; border-radius: 24px; background: linear-gradient(135deg, rgba(255, 138, 31, .16), rgba(138, 42, 6, .14)); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .3); }
.fa-cta h2 { font-size: 28px; font-weight: 800; }
.fa-cta p { margin: 8px 0 0; color: var(--ink-2); max-width: 52ch; }
.fa-cta .fa-actions { margin-top: 0; }
@media (max-width: 600px) { .fa-cta-in { padding: 28px 22px; } }

/* Pictures in articles: one (.fa-shot), two side by side (.fa-figs), with a caption */
.fa-shot figcaption { padding: 12px 16px; background: var(--glass); color: var(--muted); font-size: 14px; }
.fa-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .fa-figs { grid-template-columns: minmax(0, 1fr); } }
.fa-wide { max-width: 980px; margin: 0 auto; }
.fa-text { max-width: 720px; margin: 0 auto; color: var(--ink-2); font-size: 17px; }
.fa-text p { margin: 0 0 16px; }