/* The front page's own styles (moved out of Index.cshtml 12.08.2026 when the page hit the
   500-line ceiling). Design tokens come from gv.css - this file must not redeclare them
   ([claim: pages-inherit-design-tokens]). The discovery/search state machine the selectors
   serve is documented in Index.cshtml and docs/SOEG-PLAN.md. */
/* Discovery state: shown when no search is active. The search surface below is the same
   page with the filters turned on - see wwwroot/js/soegside.js and docs/SOEG-PLAN.md.
   Redesigned 11.08.2026 from the approved /design/forside.html mock: white ground, hero
   with an ad rail, three photo strips. The front page deliberately keeps its own layout
   overrides (wider wrap, bigger h1) - see the base-layer comment in gv.css. */
main.wrap { max-width:71rem; }
#titel { font-size:clamp(1.9rem, 3.4vw, 2.5rem); line-height:1.15; letter-spacing:-.015em;
    font-weight:700; margin:0 0 .5rem; }
.lead { font-size:1.05rem; color:var(--muted); margin:0 0 1.3rem; max-width:34rem; }
.fs-hero { display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:2.5rem;
    align-items:start; margin:.8rem 0 0; }

.soegwrap { position:relative; }
.soegres { position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:.35rem;
    background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden auto;
    max-height:min(60vh,26rem); box-shadow:var(--skygge); display:none; }
.soegrad { display:block; width:100%; text-align:left; font:inherit; padding:.6rem .85rem;
    text-decoration:none; color:var(--fg); border:0; border-bottom:1px solid var(--line);
    font-size:.95rem; background:none; cursor:pointer; }
.soegrad:last-child { border-bottom:0; }
.soegrad:hover, .soegrad:focus, .soegrad.sel { background:var(--accentbg); outline:none; }
.soegnb { color:var(--muted); font-size:.8rem; }
/* The "go to the page" row under the top area hit. Quieter than a real result and indented
   to the tag column, so it reads as belonging to the row above rather than as a fifth hit.
   Full width on purpose: it is a phone target, not a chevron. */
.soegrad.soegtil { font-size:.85rem; color:var(--muted); padding-top:.45rem;
    padding-bottom:.5rem; padding-left:1.15rem; }
.soegrad.soegtil .soegpil { color:var(--accent); font-weight:700; }
.soegtag { display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.03em; color:var(--accent); background:var(--accentbg);
    border-radius:5px; padding:.06rem .38rem; margin-right:.45rem; vertical-align:.08em; }
/* The box: ink border, the Søg button inside its right edge (soegboks.js clicks the
   selected suggestion for it, so button and Enter are the same act). */
#omnibox { width:100%; padding:.9rem 5.6rem .9rem 1.05rem; font:inherit; font-size:1.06rem;
    border:2px solid var(--fg); border-radius:14px; background:var(--card); color:inherit; }
#soegknap { position:absolute; right:.42rem; top:.42rem; bottom:.42rem; border:0; cursor:pointer;
    background:var(--accent); color:var(--paa-accent); font:inherit; font-weight:700;
    font-size:.95rem; padding:0 1.15rem; border-radius:10px; }
#soegknap:hover { filter:brightness(1.08); }
.genvejboks { margin:.6rem 0 0 .2rem; }
.genvejknap { font:inherit; font-size:.82rem; color:var(--accent); background:none;
    border:1px solid var(--line); border-radius:999px; padding:.2rem .75rem; cursor:pointer; }
.genvejgrp { margin:.3rem 0; display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline; font-size:.85rem; }
.genvejgrp .senlabel { color:var(--muted); font-size:.8rem; }
.genvejgrp a { color:var(--accent); text-decoration:none; border:1px solid var(--line);
    border-radius:999px; padding:.15rem .6rem; }
.genvejkonto { margin-top:.55rem; font-size:.82rem; color:var(--muted); }
.genvejkonto a { color:var(--accent); }
.genvejkonto button { font:inherit; font-size:.82rem; color:var(--accent); background:none;
    border:none; padding:0; cursor:pointer; text-decoration:underline; }

/* The pulse strip: live figures that are each a search you can run. PILLS, not plain
   figures (Jonas, 11.08 evening: the bare figure-over-label row did not read as
   clickable at all) - border, radius and hover state are the affordance. */
/* The heading over them, and its own margins rather than .uch2's: that class is spaced for a
   section break further down the page, and here the heading and its pills are one block. */
.puls-h { margin:1.7rem 0 .6rem; }
.puls-h + .puls { margin-top:0; }
.puls { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0 0; }
/* "Eget filter" gets NO styling of its own (Jonas, 17.08.2026: "I don't like eget filter is
   highlighted it should be as the other pill buttons"). It first shipped in accent green on the
   argument that it is the action among a row of counts - which was reasoning about the row rather
   than looking at it. A row of pills where one is coloured reads as one pill being more important,
   not as one being a different kind. */
.puls a { display:inline-flex; align-items:baseline; gap:.4rem; text-decoration:none;
    border:1px solid var(--line); border-radius:999px; padding:.42rem .95rem;
    background:var(--card); color:var(--muted); font-size:.82rem; line-height:1.2; }
/* A PILL WITH NO FIGURE IN IT HAS NO BASELINE TO ALIGN TO. The row is a flex line, so every pill
   is stretched to the height of the tallest - which is set by the 1,02rem serif <b> - and
   `align-items:baseline` then parks a lone text run at the TOP of that taller box. Measured
   17.08.2026 at 1280px: "Eget filter" sat 6 px below its own top edge and 11 px above its bottom,
   against 6/7 on every pill that carries a number (Jonas: "the text a little too high").
   Centring is right for exactly this case and wrong for the rest, where the big number and its
   small label must share a baseline - hence the :not(), not a change to the rule above. It earns
   its keep twice over since the company front's recipes, none of which carry a figure, moved onto
   this class the same day. */
.puls a:not(:has(b)) { align-items:center; }
.puls b { color:var(--fg); font-size:1.02rem; letter-spacing:-.01em;
    font-family:"Source Serif 4", Georgia, serif; font-weight:600;
    font-variant-numeric:tabular-nums; }
.puls a:hover { border-color:var(--accent); background:var(--accentbg); }
.puls a:hover b { color:var(--accent); }

/* Siden sidst: search rows with since-last-visit pills. */
#sidenboks { margin:0 0 .5rem; }
.storboks { background:var(--card); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--skygge-let); }
.sb-h3 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); padding:.7rem 1rem .1rem; }
/* .srad/.spil/.sbad/.sthumb/.stekst moved to gv.css 12.08.2026: the news rows are drawn on
   /konto too, and a component two pages share lives in the shared sheet. */
.sb-h3 + .srad { border-top:0; }

/* The Seneste dropdown: genveje.js's fold-out as a floating panel instead of an
   in-flow block that pushed the pulse pills down when opened. */
.genvejboks { position:relative; }
.genvejpanel { position:absolute; left:0; top:calc(100% + .4rem); z-index:35;
    width:23rem; max-width:88vw; background:var(--card); border:1px solid var(--line);
    border-radius:12px; box-shadow:var(--skygge); padding:.55rem .95rem .7rem; }

/* Search state: the hero folds down to heading + box. soegvis.js drops `hidden` on
   #soegflade the moment any criterion is set, and everything decorative above the
   results - lead, pulse pills, the ad - must fold with it. On a phone they were a full
   screen stacked on top of the first result (Jonas, 11.08 evening); an ad ABOVE search
   results is also simply the wrong place for it. */
main:has(#soegflade:not([hidden])) .lead,
main:has(#soegflade:not([hidden])) .puls-h,
main:has(#soegflade:not([hidden])) .puls,
main:has(#soegflade:not([hidden])) .fs-rail { display:none; }
main:has(#soegflade:not([hidden])) .fs-hero { grid-template-columns:1fr; gap:0; }
main:has(#soegflade:not([hidden])) #titel { font-size:1.45rem; }

/* The ad rail (11.08.2026, Jonas). The card itself is Shared/_Annonce.cshtml + the
   .ann-* block in gv.css - one copy for every page that carries an ad. The slot is part
   of the point: a page with a real advertiser reads as a page with real traffic. */
.fs-rail { display:flex; flex-direction:column; gap:1rem; }

/* The photo strips themselves - .uch, .strib, .fkort - moved to css/strib.css 14.08.2026, because
   /by/* and /kommune/* draw the same cards from the same table (docs/MAKEOVER-FAELLES.md). The
   front page links both sheets; everything that is still front-page-only stayed here. */

.fs-par { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:1rem 2rem; align-items:start; }
.teaser { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line);
    box-shadow:var(--skygge-let); min-height:15rem; display:block; }
.teaser img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.teaser .tover { position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1.2rem .9rem;
    background:linear-gradient(transparent, rgba(20,20,15,.72)); color:#fff; }
.teaser h3 { font-family:"Source Serif 4", Georgia, serif; font-size:1.2rem; margin:0 0 .1rem; }
.teaser p { margin:0; font-size:.86rem; opacity:.92; }

.uch2 { font-size:1.2rem; letter-spacing:-.015em; margin:2.4rem 0 .7rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr)); gap:.7rem; }
.feat { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
    border-radius:12px; padding:.85rem 1rem; text-decoration:none; color:inherit;
    box-shadow:var(--skygge-let);
    transition:border-color .12s, transform .12s, box-shadow .12s; }
.feat span:not(.antalt) { flex:1; }
.feat b { display:block; font-size:.95rem; letter-spacing:-.01em; color:var(--accent); }
.feat span { font-size:.8rem; color:var(--muted); }
.feat .antalt { display:block; font-size:.78rem; color:var(--muted); margin-top:.55rem; }
.feat .antalt strong { color:var(--fg); font-weight:600; }
.cta { margin:1.8rem 0 0; display:flex; gap:1.4rem; flex-wrap:wrap; }
.cta a { color:var(--accent); font-weight:600; text-decoration:none; }

/* Hover only on devices that HAVE one. On touch the hover style sticks to whatever you
   last tapped - a card you have been to keeps sitting 2 px lifted, a chip you turned off
   keeps its accent border. Same guard and same reason as gv.css (24.07) and the two Soeg
   partials. `.soegrad` is deliberately outside it: it shares its declaration with :focus
   and .sel, and the row is removed the moment you tap it. */
@media (hover:hover) {
    .genvejknap:hover { border-color:var(--accent); background:var(--accentbg); }
    .genvejgrp a:hover { border-color:var(--accent); background:var(--accentbg); }
    .feat:hover { border-color:var(--accent); transform:translateY(-2px); }
    .cta a:hover { text-decoration:underline; }
    .teaser:hover .tover h3 { text-decoration:underline; }
}

@media (max-width:920px) {
    /* minmax(0,1fr), not 1fr: a bare fr track's auto minimum is the column's min-content, and
       the sold strip's flex rail (three cards at 74vw) has a 938px min-content at 390 - so the
       track grew to 938, the whole page scrolled sideways and the strip itself never scrolled.
       The desktop columns above already knew this; the mobile override forgot it (found
       15.08.2026, gated by tools/siden-boks-tjek.mjs's page-width assertion). */
    .fs-hero { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
    .fs-par { grid-template-columns:minmax(0,1fr); }
}

/* Results toolbar and list. */
.vaerktoej { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:1rem 0 .7rem; }
.vaerktoej .antal { font-weight:700; font-size:.95rem; }
.vaerktoej select { width:auto; }
.vaerktoej .hoejre { margin-left:auto; display:flex; gap:.5rem; align-items:center; }
#resultater { display:grid; gap:.6rem; }
#mere { display:block; margin:1.1rem auto 0; }
#status { text-align:center; color:var(--muted); font-size:.85rem; padding:.8rem 0; }
.fodnote { margin-top:1.6rem; font-size:.76rem; color:var(--muted); }
.fodnote a { color:var(--accent); }
/* Zero results: the drop-one verdict. Never just "ingen match" - it names the criterion
   that did it and offers a value that works (docs/SOEG-PLAN.md §5). */
.tomboks { border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem;
    background:var(--card); margin:.6rem 0 0; }
.tomboks h3 { margin:0 0 .5rem; font-size:1rem; }
.tomrad { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; padding:.42rem 0;
    border-top:1px solid var(--line); font-size:.9rem; }
.tomrad:first-of-type { border-top:0; }
.tomrad .navn { font-weight:600; }
.tomrad .tal { color:var(--muted); font-size:.84rem; }
.tomrad .knapper { margin-left:auto; display:flex; gap:.4rem; }
/* "Dine adresser" event rows in the Siden sidst box (12.08.2026, forside-siden.js). */

/* Mobile: content before commerce (Jonas, 12.08.2026) - the hero rail ad hides and its twin
   after the first strip shows instead. Two static copies beat moving one node with JS on a
   cached page. */
.annonce-mobil { display:none; }
@media (max-width:920px) {
    .fs-rail { display:none; }
    .annonce-mobil { display:block; margin:1.6rem 0 0; }
}