/* The "Venues" section (KAN-44). The archive rides on catalog.css.
     The single — hero with the summary, list of events at the venue, map. */

  /* Hero */
  .venue-hero{margin-top:16px;border-radius:16px;overflow:hidden;position:relative;background:var(--slate)}
  /* width:100% is mandatory next to aspect-ratio + max-height. Without it the browser,
     having hit the height ceiling, squeezes the WIDTH to keep the ratio: on desktop the
     cover came out 1120px inside a 1232px block, with a 112px strip gaping on the right
     (Playwright measurement 25.07.2026). An explicit width makes the width the driving
     axis, and the ceiling trims the height instead, as intended. The same trap is in
     place.css and tour.css; .hero-main on the front page already avoids it. */
  .venue-hero .r32{aspect-ratio:24/9;max-height:420px;width:100%}
  .venue-hero .vh-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:linear-gradient(transparent 34%,rgba(9,16,24,.9));color:#fff}
  .venue-hero .vh-city{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--red);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:8px;margin-bottom:12px}
  .venue-hero h1{font-size:32px;font-weight:700;line-height:1.16;max-width:820px}
  .venue-hero .vh-addr{margin-top:10px;font-size:14.5px;color:var(--ph-2);display:flex;align-items:center;gap:6px}
  /* Credit for a free photo: required by CC BY/BY-SA, but it must not compete with
     the heading — small, in the far corner, on top of the gradient's darkening. */
  .venue-hero .cover-credit{position:absolute;right:10px;bottom:8px;z-index:1;font-size:11px;line-height:1.3;color:rgba(255,255,255,.72);max-width:60%;text-align:right}
  .venue-hero .cover-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .venue-hero .cover-credit a:hover{color:#fff}

  /* Layout */
  .venue-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;margin-top:28px}
  .venue-layout > *{min-width:0}
  .venue-block{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:22px}
  .venue-block:last-child{margin-bottom:0}
  .venue-block h2{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;margin-bottom:16px}
  .venue-block h2 i{color:var(--red);font-size:21px}
  .venue-about{font-size:16px;line-height:1.7;color:var(--ink)}
  .venue-about p{margin-bottom:14px}

  /* List of events at the venue */
  .venue-events{display:flex;flex-direction:column}
  .ve-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
  .ve-row:first-child{padding-top:0}
  .ve-row:last-child{border-bottom:none;padding-bottom:0}
  .ve-row .ve-thumb{width:92px;flex-shrink:0;border-radius:10px;aspect-ratio:1/1}
  .ve-row .ve-body{flex:1;min-width:0}
  .ve-row h3{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:5px}
  .ve-row .ve-date{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
  .ve-row .ve-date i{font-size:14px;color:var(--red)}
  .ve-row .ve-arr{font-size:18px;color:var(--ph);flex-shrink:0}
  .ve-row:hover h3{color:var(--red)}

  /* Sidebar */
  .venue-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
  .venue-side .side-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
  .venue-side .sc-head{font-size:14px;font-weight:700;margin-bottom:12px}
  .venue-side .contact-row{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
  .venue-side .contact-row:last-child{border-bottom:none}
  .venue-side .contact-row i{font-size:18px;color:var(--red);flex-shrink:0}
  .venue-side .cr-label{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .venue-side .cr-val{font-size:14px;color:var(--ink)}

  .biz-map{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
  .biz-map .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);font-size:32px;color:var(--red)}
  .biz-map .map-open{position:absolute;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:5px;background:var(--card);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.15)}
  .biz-map .map-open i{font-size:15px}

  @media(max-width:1000px){
    .venue-layout{grid-template-columns:1fr;gap:0}
    .venue-side{position:static;margin-top:22px}
  }
  @media(max-width:760px){
    .venue-hero h1{font-size:23px}
    .venue-hero .vh-body{padding:18px}
    .venue-block{padding:18px}
  }