/* FD-107 / FD-123: no visual surface may collapse to an empty near-black rectangle.
   This is intentionally loaded after visual-identity.css so image loading failures retain
   category colour, pattern and depth while exact/cleared artwork remains first priority. */
.visual-slot{
  background:
    radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--identity-accent) 50%,transparent),transparent 32%),
    linear-gradient(145deg,var(--dominant),var(--secondary));
}
.visual-slot .vs-base,
.visual-slot.no-image .vs-base,
.visual-slot.image-failed .vs-base,
.vi-level-6 .vs-base{
  background:
    radial-gradient(circle at 84% 14%,color-mix(in srgb,var(--identity-accent) 62%,transparent),transparent 30%),
    radial-gradient(circle at 18% 86%,color-mix(in srgb,var(--secondary) 82%,transparent),transparent 38%),
    linear-gradient(135deg,var(--dominant) 0%,var(--secondary) 60%,color-mix(in srgb,var(--identity-accent) 48%,var(--secondary)) 100%);
}
.visual-slot.no-image .vs-pattern,
.visual-slot.image-failed .vs-pattern,
.vi-level-6 .vs-pattern{opacity:.48}
.visual-slot.no-image .vs-icon,
.visual-slot.image-failed .vs-icon,
.vi-level-6 .vs-icon{opacity:.9;filter:drop-shadow(0 6px 20px rgba(0,0,0,.22))}
.visual-slot.image-failed::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.06),transparent 38%,rgba(255,255,255,.04));
}
/* Loading should look like a living poster, never a black skeleton. */
.event-card.is-loading .vs-base,
.visual-slot.is-loading .vs-base{
  background:
    linear-gradient(105deg,transparent 8%,rgba(255,255,255,.13) 20%,transparent 34%),
    radial-gradient(circle at 84% 14%,color-mix(in srgb,var(--identity-accent) 58%,transparent),transparent 30%),
    linear-gradient(145deg,var(--dominant),var(--secondary));
  background-size:210% 100%,100% 100%,100% 100%;
}
/* Licensed external photography gets an always-visible, deliberately quiet credit line. */
.visual-slot .vs-credit{
  position:absolute;right:8px;bottom:7px;z-index:4;max-width:82%;padding:3px 6px;border-radius:6px;
  background:rgba(9,9,13,.72);color:rgba(244,240,232,.86);font:9px/1.25 var(--font-ui,system-ui,sans-serif);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.visual-slot .vs-content+.vs-credit{bottom:7px}
.vs-marquee .vs-credit,.vs-setlist-hero .vs-credit{font-size:9px;max-width:74%}
/* The default identity must still feel authored when classification is unknown. */
.vi-default{--dominant:#4B236B;--secondary:#116A78;--identity-accent:#F0A43C}
/* D2-O4: credit is in the card's foreground, outside the image's isolated stacking context. */
.vs-credit--card{display:block;position:relative;z-index:4;padding:5px 10px;background:#1b1823;color:#a9a2b3;font:9px/1.45 var(--font-ui,system-ui,sans-serif);white-space:normal;overflow-wrap:anywhere;border-top:1px solid #302b39;text-align:left}
.vs-credit--card::before,.sports-hero-credit::before{content:"Image: ";font-weight:700}
/* Photo provenance is a footer, after the event details/action, never a subtitle.
   Flow layout reserves its actual wrapped height on both card and tile tiers. */
#app :is(.event-card,.tile):has(> .vs-credit--card){display:flex;flex-direction:column}
#app :is(.event-card,.tile) > .vs-credit--card{order:3;flex:none;width:100%;box-sizing:border-box;margin-top:auto}
#app .vi-editorial:has(> .vs-credit--card){aspect-ratio:auto}
#app .vi-editorial:has(> .vs-credit--card) > :is(.event-card__content,.tile-b){position:relative;inset:auto;padding-bottom:16px;margin-top:auto}
#app .vi-editorial.event-card:has(> .vs-credit--card){min-height:280px}
/* Portrait-backed editorial cards use separate art/copy columns, not a 74px thumbnail under text. */
#app .vi-editorial:has(> .bb[data-bb]){display:grid;grid-template-columns:minmax(0,1fr) 34%;aspect-ratio:auto}
#app .vi-editorial > .bb[data-bb]{grid-column:2;grid-row:1;width:100%;height:100%;aspect-ratio:auto;margin:0}
#app .vi-editorial:has(> .bb[data-bb]) > :is(.event-card__content,.tile-b){grid-column:1;grid-row:1;position:relative;inset:auto;padding:18px 12px 44px;background:none}

.vs-credit--card::before{font-weight:400}

/* FD-147: compact editorial bands distinguish category art from place photography.
   Level-scoped and caller-marked; removing this block restores the previous visual. */
#app .vi-place-category:is(.vi-level-4,.vi-level-6){
  aspect-ratio:auto;min-height:126px;height:126px;border-radius:12px;
  background:#e8dfcc;color:#243a32;isolation:isolate;border:1px solid #b6a889;
}
#app .vi-place-category .vs-base{background:#e8dfcc}
#app .vi-place-category .vs-pattern{opacity:.12}
#app .vi-place-category .vs-scrim{background:linear-gradient(90deg,#e8dfcc 0%,#e8dfcc 58%,rgba(232,223,204,.35) 100%)}
#app .vi-place-category .vs-image{opacity:.28}
#app .vi-place-category.vi-default :is(.vs-image,.vs-icon){opacity:0}
#app .vi-place-category .vs-place-pin{position:absolute;right:22px;top:26px;color:#486044}
#app .vi-place-category .vs-place-pin svg{width:44px;height:44px}
#app .vi-place-category .vs-icon{width:44px;height:44px;top:26px;right:22px;color:#486044;opacity:1;z-index:2}
#app .vi-place-category .vs-content{min-height:0;height:100%;box-sizing:border-box;justify-content:center;padding:18px 82px 28px 18px;text-align:left}
#app .vi-place-category .vs-place-label{font:700 17px/1.2 var(--font-ui,system-ui,sans-serif);color:#243a32;overflow-wrap:anywhere}
#app .vi-place-category .vs-place-note{margin-top:7px;font:10px/1.2 var(--font-ui,system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#4f5b4f}
#app .vi-place-category .vs-credit{font-size:9px;line-height:1.2;background:none;color:#394738;max-width:calc(100% - 24px);right:12px;bottom:6px;padding:0}

/* FD-148 #13: a native, keyboard-accessible detail outside card actions. */
.image-info-card{min-width:0;margin:0 13px 10px;display:flex;flex-direction:column;align-self:stretch}
#app .image-info-card > :is(.ev,.tile){width:100%;margin:0;flex:1}
.image-info-card.image-info-tile{width:208px;flex:0 0 auto;margin:0;scroll-snap-align:start}
.image-info-card:has(> .vi-editorial.event-card){margin:12px 0}
#app .image-info-card > .vi-editorial{aspect-ratio:auto}
#app .image-info-card > .vi-editorial > :is(.event-card__content,.tile-b){position:relative;inset:auto;padding-bottom:16px;margin-top:auto}
#app .image-info-card > .vi-editorial.event-card{min-height:280px}
.trip-radar-list > .image-info-card{margin:0 0 14px}
#app details.image-info{position:relative;inset:auto;display:block;max-width:none;width:100%;box-sizing:border-box;background:#1b1823;color:#c5bfce;padding:0 10px;border-radius:0 0 9px 9px;white-space:normal;overflow:visible;pointer-events:auto;text-align:left;font:9px/1.45 var(--font-ui,system-ui,sans-serif);z-index:4}
#app details.image-info::before{content:none}
#app details.image-info summary{cursor:pointer;min-height:24px;display:flex;align-items:center;gap:5px;list-style:none;font:inherit;color:inherit}
#app details.image-info summary::before{content:'+';font-size:13px}
#app details.image-info[open] summary::before{content:'−'}
#app details.image-info :is(summary,a):focus-visible{outline:2px solid #ffc95c;outline-offset:2px;border-radius:3px}
#app details.image-info p{margin:0;padding:4px 0 8px;font:11px/1.5 var(--font-ui,system-ui,sans-serif);overflow-wrap:anywhere}
#app details.image-info a{display:inline-block;color:#ffe1a0;padding:4px 0 10px;font-size:11px}
#app .visual-slot + details.image-info{margin-bottom:8px}

/* FD-148 #14: cuisine artwork is a compact marker, not a pretend venue banner. */
#app .vi-place-category:is(.vi-level-4,.vi-level-6){height:88px;min-height:88px;background:#211a24;border-color:#68503e;color:#fff0cf;border-radius:10px}
#app .vi-place-category .vs-base{background:#211a24}
#app .vi-place-category .vs-image{left:auto;right:0;width:56%;height:100%;object-fit:cover;object-position:50% 58%;opacity:1}
#app .vi-place-category .vs-scrim{background:linear-gradient(90deg,#211a24 0%,#211a24 40%,rgba(33,26,36,.28) 72%,transparent 100%)}
#app .vi-place-category .vs-pattern{opacity:.05}
#app .vi-place-category .vs-icon{display:none}
#app .vi-place-category .vs-content{padding:12px 48% 12px 14px;justify-content:center;min-height:0}
#app .vi-place-category .vs-place-label{font:700 13px/1.25 var(--font-ui,system-ui,sans-serif);color:#fff0cf}
#app .vi-place-category .vs-place-note{margin-top:5px;font:9px/1.3 var(--font-ui,system-ui,sans-serif);letter-spacing:.02em;text-transform:none;color:#ddd0bd}

/* C3: compact food-only originals; complete subjects, no venue-like scene or crop. */
#app .vi-place-category.vi-place-c3{max-width:460px;background:#f4eddd;border-color:#b5bea5}
#app .vi-place-category.vi-place-c3 + details.image-info{max-width:460px}
#app .vi-place-category.vi-place-c3 .vs-base{background:#f4eddd}
#app .vi-place-category.vi-place-c3 .vs-image{width:54%;height:100%;object-fit:contain;object-position:center;opacity:1}
#app .vi-place-category.vi-place-c3 :is(.vs-scrim,.vs-pattern){display:none}
#app .vi-place-category.vi-place-c3 .vs-content{padding:10px 56% 10px 14px}
#app .vi-place-category.vi-place-c3 .vs-place-label{color:#243a32}
#app .vi-place-category.vi-place-c3 .vs-place-note{color:#42563e}

/* C5 / FD-148 #13: attribution belongs to the card, with the same material and rhythm.
   Keep the founder's small credit type; the whole summary remains the disclosure target. */
#app details.image-info{background:#15111c;color:#bcb3c7;border-top:1px solid #bca67726;padding:0 12px;border-radius:0 0 10px 10px}
#app details.image-info summary{min-height:28px;gap:7px;letter-spacing:.015em}
#app details.image-info summary::before{content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);flex:none;margin:0 2px 0 1px}
#app details.image-info[open] summary::before{content:'';transform:rotate(45deg);margin-top:-3px}
#app details.image-info[open]{padding-bottom:8px}
#app details.image-info p{padding:3px 0 5px;max-width:52ch;color:inherit}
#app details.image-info a{padding:5px 0 3px;text-underline-offset:3px;text-decoration-thickness:1px}
#app .vi-place-category.vi-place-c3 + details.image-info{background:#f4eddd;color:#42563e;border-top-color:#243a3226}
#app .vi-place-category.vi-place-c3 + details.image-info a{color:#243a32}
#app .vi-place-category.vi-place-c3 + details.image-info :is(summary,a):focus-visible{outline-color:#42563e;outline-offset:1px}
#app .vi-place-category.vi-place-c3:has(+ details.image-info){border-bottom-left-radius:0;border-bottom-right-radius:0}