/* sv-doors.css - "Vijf deuren" (spec 6.3, door card 3.5, motion 14 #6-7). Markup: src/partials/doors.html.
   Phone (and the 404 at every width, .sv-doors--compact): compact horizontal cards, 4:5 thumbnail left, text right,
   ticket and buttons full width under it. >= 768 px: portrait cards, 3 + 2; >= 1280 px: five in one row.
   The title link stretches over the card (image + title open the door page); the two buttons sit above it.
   Prefixes: sv-doors, sv-door. */

.sv-doors{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sv-gap);margin:0;padding:0;list-style:none}
.sv-door{position:relative;isolation:isolate;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:16px;row-gap:12px;align-items:start;min-width:0;padding:12px;border:1px solid var(--sv-line);border-radius:var(--sv-r-card);background:var(--sv-shell)}

/* media: in the compact card the wrapper dissolves, so the picture sits left. Fix round 2: its AI chip gets its own
   row right under the thumbnail, left-aligned with it (it floated in the text column and read like a tag on the text).
   It spans the card, so "AI-beeld · voorbeeldopstelling" fits one line on a 360 px phone; it still wraps with large
   text (reflow). Ticket and buttons auto-place into the rows under it. */
.sv-door__media{display:contents}
.sv-door__media picture,.sv-door__map{grid-column:1;grid-row:1 / span 2;display:block;overflow:hidden;border-radius:var(--sv-r-img);background:var(--sv-sand-2)}
.sv-door__map{background:var(--sv-night)}
.sv-door__media img{width:100%;height:auto;transition:transform .3s var(--sv-ease)}
.sv-door__media > .sv-chip--ai{position:relative;left:auto;bottom:auto;z-index:2;grid-column:1 / -1;grid-row:3;justify-self:start;max-width:100%;white-space:normal;line-height:1.3;overflow-wrap:anywhere}
.sv-door:has(> .sv-door__media > .sv-chip--ai){grid-template-rows:auto auto auto auto 1fr}

.sv-door__body{grid-column:2;grid-row:1;display:grid;justify-items:start;gap:4px;min-width:0}
.sv-door__num{margin-bottom:2px;font-size:2.75rem;color:var(--sv-text)}
.sv-door__title{font-size:clamp(1.3rem,1.1rem + .8vw,1.625rem)}
.sv-door__title::after{content:"";display:block;height:2px;margin-top:6px;background:var(--sv-lime-deep);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--sv-ease)}
.sv-door__link{color:inherit;text-decoration:none}
.sv-door__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--sv-r-card)}
.sv-door__link:focus-visible{outline:none}
.sv-door__link:focus-visible::after{outline:3px solid var(--sv-lime-deep);outline-offset:2px}
.sv-door__arrow.sv-icon{width:20px;height:20px;margin-left:6px;vertical-align:-2px;transition:transform .3s var(--sv-ease)}
.sv-door__line{color:var(--sv-muted);font-size:.9375rem;line-height:1.5}
.sv-door__ticket{grid-column:1 / -1;min-width:0}
.sv-door__actions{position:relative;z-index:2;grid-column:1 / -1;align-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.sv-door__actions .sv-btn--secondary{flex:1 1 100%;margin-bottom:2px}
.sv-door__ticket .sv-ticket--info .sv-ticket__price{line-height:1.15}

/* hover / focus (14 #7): the door opens (image 1.04), a lime-deep bar grows under the title, the arrow moves 4 px.
   Reduce motion: the bar only (the global rule makes it instant). */
.sv-door:hover .sv-door__title::after,.sv-door:focus-within .sv-door__title::after{transform:none}
.sv-motion .sv-door:hover .sv-door__media img,.sv-motion .sv-door:focus-within .sv-door__media img{transform:scale(1.04)}
.sv-motion .sv-door:hover .sv-door__arrow,.sv-motion .sv-door:focus-within .sv-door__arrow{transform:translateX(4px)}

/* the 404 (compact at every width): a grid of compact cards, a slightly larger thumbnail */
@media (min-width:600px){
  .sv-door{grid-template-columns:144px minmax(0,1fr)}
  .sv-doors--compact{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
}

/* portrait doors: 3 + 2 from 768 px, five in one row from 1280 px */
@media (min-width:768px){
  .sv-doors:not(.sv-doors--compact){grid-template-columns:repeat(6,minmax(0,1fr))}
  .sv-doors:not(.sv-doors--compact) > .sv-door{grid-column:span 2;display:flex;flex-direction:column;gap:14px;padding:12px 12px 14px}
  .sv-doors:not(.sv-doors--compact) > .sv-door:nth-child(4){grid-column:2 / span 2}
  .sv-doors:not(.sv-doors--compact) > .sv-door:nth-child(5){grid-column:4 / span 2}
  .sv-doors:not(.sv-doors--compact) .sv-door__media{display:block;position:relative}
  .sv-doors:not(.sv-doors--compact) .sv-door__media > .sv-chip--ai{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px)}
  .sv-doors:not(.sv-doors--compact) .sv-door__num{font-size:clamp(2.75rem,2rem + 3vw,4.5rem)}
  .sv-doors:not(.sv-doors--compact) .sv-door__actions{margin-top:auto}
}
@media (min-width:1280px){
  .sv-doors:not(.sv-doors--compact){grid-template-columns:repeat(5,minmax(0,1fr))}
  .sv-doors:not(.sv-doors--compact) > .sv-door:nth-child(n){grid-column:auto}
  .sv-doors:not(.sv-doors--compact) .sv-door__num{font-size:3.75rem}
  /* fix round 1: five 194-222 px doors in a row. Smaller ticket price and padding (door 03's ticket ran 22-29 px past
     its card), tickets bottom-aligned at one height, the button label on one line */
  .sv-doors:not(.sv-doors--compact) .sv-door__ticket{margin-top:auto}
  .sv-doors:not(.sv-doors--compact) .sv-door__ticket .sv-ticket:not(.sv-ticket--info) .sv-ticket__price{font-size:1.75rem}
  .sv-doors:not(.sv-doors--compact) .sv-door__ticket .sv-ticket__body{padding-inline:12px}
  .sv-doors:not(.sv-doors--compact) .sv-door__actions{margin-top:16px}
  .sv-doors:not(.sv-doors--compact) .sv-door__actions .sv-btn{padding-inline:10px;font-size:.875rem}
}

/* the section around the doors on home (#deuren) */
.sv-doors__note{margin-top:20px}

/* motion 14 #6: the same rise as .sv-reveal, staggered +5 % per card (scroll-linked; visible without support) */
@supports (animation-timeline:view()){
  .sv-motion .sv-door{animation:sv-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  .sv-motion .sv-door:nth-child(2){animation-range:entry 5% entry 40%}
  .sv-motion .sv-door:nth-child(3){animation-range:entry 10% entry 45%}
  .sv-motion .sv-door:nth-child(4){animation-range:entry 15% entry 50%}
  .sv-motion .sv-door:nth-child(5){animation-range:entry 20% entry 55%}
}