/* The photo-strip component: a section heading with a "see all" link, and a row of home cards.
   Moved out of forside.css 14.08.2026 when the strip became shared (docs/MAKEOVER-FAELLES.md) -
   the front page, /by/* and /kommune/* all draw it, and a second copy of a card chassis is how two
   surfaces start disagreeing about what a listing looks like. Design tokens come from gv.css; this
   file must not redeclare one ([claim: pages-inherit-design-tokens]).

   Markup: Pages/Shared/_TilSalgStrib.cshtml (area pages) and Pages/Index.cshtml (the front page's
   three editorial strips, which carry their own queries and the inline ad card).

   .uch, the heading ROW above a strip, MOVED TO gv.css 17.08.2026: it was never this file's style,
   and /virksomheder draws it without drawing any strip. The reasoning lives there. */

.strib { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1rem; }
/* Fewer cards than the strip's five. .s3 is the front page's name for the three-card sold strip
   and .n3 is what the shared partial emits from its card count - one rule so there is one
   behaviour, rather than two names that can drift apart. */
.strib.n1 { grid-template-columns:minmax(0,22rem); }
.strib.n2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.strib.s3, .strib.n3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.strib.n4 { grid-template-columns:repeat(4, minmax(0,1fr)); }

.fkort { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
    color:var(--fg); box-shadow:var(--skygge-let); display:flex; flex-direction:column;
    min-width:0; text-decoration:none; }
/* display:block is load-bearing: .foto is a span, and aspect-ratio does NOT apply to an
   inline box - every landscape photo happened to render 3:2 by its own proportions, and
   the first portrait photo (Rådmand Steins Alle, 12.08) stretched its whole strip. */
.fkort .foto { display:block; position:relative; aspect-ratio:3/2; background:var(--panel); overflow:hidden; }
.fkort .foto img { width:100%; height:100%; object-fit:cover; display:block; }
.fkort .flag { position:absolute; top:.55rem; left:.55rem; background:var(--card); color:var(--fg);
    font-size:.72rem; font-weight:700; border-radius:6px; padding:.18rem .5rem;
    box-shadow:0 1px 4px rgba(0,0,0,.18); }
.fkort .flag.solgt { background:var(--fg); color:var(--bg); }
.fkort .dom { position:absolute; bottom:.55rem; left:.55rem; font-size:.75rem; font-weight:700;
    border-radius:6px; padding:.2rem .55rem; box-shadow:0 1px 4px rgba(0,0,0,.22); }
.fkort .dom.under { background:var(--accent); color:var(--paa-accent); }
.fkort .dom.over { background:var(--card); color:var(--neg); }
.fkort .ktekst { padding:.65rem .85rem .8rem; display:flex; flex-direction:column; gap:.14rem; }
.fkort .pris { font-family:"Source Serif 4", Georgia, serif; font-weight:700; font-size:1.1rem;
    letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.fkort .adr { font-size:.88rem; font-weight:600; }
.fkort .meta { font-size:.79rem; color:var(--muted); }
/* The ad variant of the card. Only the front page places one today, but it is a .fkort and
   belongs with the chassis - an advertiser card that stops matching the listings around it is
   exactly what "one owner" is for. */
.fkort.ann { background:var(--panel); position:relative; padding:1rem 1.05rem; overflow:visible; }
.fkort.ann .maerke { position:absolute; top:.6rem; right:.8rem; font-size:.66rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; color:var(--muted); opacity:.8; }
.fkort.ann h3 { font-family:"Source Serif 4", Georgia, serif; font-size:1.1rem; margin:.5rem 0 .3rem; }
.fkort.ann p { margin:0 0 .8rem; font-size:.84rem; color:var(--muted); }
.fkort.ann .hvem { display:block; margin-top:.7rem; font-size:.78rem; font-weight:700; }

/* Hover only on devices that HAVE one - on touch it sticks to whatever you last tapped. Same
   guard and same reason as gv.css (24.07). */
@media (hover:hover) {
    .fkort:hover .adr { text-decoration:underline; }
}

/* Phone: the grid becomes a swipeable rail. The -1.25rem bleed is the body's own side padding
   (gv.css), so the rail runs edge to edge on any page that carries the component. */
@media (max-width:920px) {
    .strib, .strib.s3, .strib.n1, .strib.n2, .strib.n3, .strib.n4 {
        display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
        margin:0 -1.25rem; padding:0 1.25rem .6rem; }
    .strib > * { flex:0 0 74vw; scroll-snap-align:start; }
}