/*
Theme Name: CSA Hybrid
Author: Coffee Shop Acoustic
Description: Prilagođeni CSA frontend povezan s WordPress pričama i audio isječcima.
Version: 1.8.0
Text Domain: csa-hybrid
*/

* { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; min-height: 100%; }
    body {
      min-height: 100vh;
      font-family: Arial, sans-serif;
      background: #604735;
      color: #38271e;
      padding: 3vh 3vw;
    }

    /* Predsoblje: stol, fotografije i CSA logo */
    .predsoblje {
      position: relative;
      z-index: 2;
      min-height: 94vh;
      overflow: hidden;
      border-radius: 3px;
      background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 239, 207, 0.35), transparent 48%),
        linear-gradient(135deg, #e1cbae, #c9aa83 55%, #dfc7a5);
      box-shadow:
        0 22px 24px -8px rgba(35, 20, 12, 0.72),
        0 12px 35px rgba(31, 17, 10, 0.22),
        inset 0 0 70px rgba(86, 54, 32, 0.08);
    }

    /* Logo je diskretan trag u gornjem desnom dijelu stola, izvan glavne fotografije. */
    .logo.logo--imprint {
      position: absolute;
      z-index: 1;
      top: 18%;
      right: 24%;
      left: auto;
      width: clamp(165px, 18vw, 250px);
      transform: rotate(-3deg);
      pointer-events: none;
      opacity: .72;
    }
    .logo.logo--imprint img {
      display: block;
      width: 100%;
      height: auto;
      max-height: none;
      object-fit: contain;
      object-position: center;
      /* Tamni sepija-ton i multiply daju dojam plitkog ureza/žarača na drvu. */
      filter: sepia(1) saturate(.62) brightness(.52) contrast(1.18) drop-shadow(0 1px 0 rgba(255, 239, 211, .22));
      mix-blend-mode: multiply;
      opacity: .68;
    }

    .photos { position: absolute; inset: 0 0 118px; pointer-events: none; }
    .foto {
      position: absolute;
      z-index: 2;
      margin: 0;
      padding: 7px 7px 9px;
      background: rgba(249, 240, 223, 0.94);
      border: 1px solid rgba(91, 61, 41, 0.12);
      box-shadow: 0 9px 20px rgba(58, 36, 23, 0.22), 0 2px 4px rgba(58, 36, 23, 0.12);
      cursor: default;
      pointer-events: none;
      transition: transform 350ms ease, filter 350ms ease, box-shadow 350ms ease, opacity 350ms ease;
    }
    .foto img { display: block; width: 100%; height: auto; }
    .foto figcaption {
      position: absolute;
      right: 11px;
      bottom: 13px;
      left: 11px;
      padding: 9px 11px;
      background: rgba(48, 32, 23, 0.84);
      color: #f4e6ce;
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(5px);
      transition: opacity 250ms ease, transform 250ms ease;
    }
    .foto-link { cursor: pointer; pointer-events: auto; }
    .foto-hint {
      position: absolute;
      z-index: 3;
      top: 12px;
      left: 12px;
      display: inline-block;
      padding: 7px 10px 6px;
      background: rgba(48, 32, 23, 0.94);
      border: 1px solid rgba(244, 230, 206, 0.46);
      color: #f4e6ce;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 1.35px;
      white-space: nowrap;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
      pointer-events: none;
    }
    .foto-link:hover, .foto-link:focus-visible {
      z-index: 20;
      transform: rotate(0deg) scale(1.035);
      box-shadow: 0 18px 32px rgba(58, 36, 23, 0.34), 0 3px 7px rgba(58, 36, 23, 0.18);
    }
    .foto-link:hover figcaption, .foto-link:focus-visible figcaption { opacity: 1; transform: translateY(0); }
    .foto-link:focus-visible { outline: 3px solid #a63f32; outline-offset: 5px; }

    /* Kontrolirani nered: fotografije različitih veličina, kutova i nekoliko slojeva. */
    .foto-duo { top: 20%; left: 5%; width: clamp(180px, 19vw, 298px); transform: rotate(-8deg); z-index: 3; }
    .foto-atmosfera { top: 5%; left: 29%; width: clamp(140px, 14vw, 218px); transform: rotate(5deg); filter: none; opacity: 1; z-index: 2; }
    .foto-rasvjeta { bottom: 7%; left: 10%; width: clamp(195px, 21vw, 318px); transform: rotate(4deg); z-index: 4; }
    .foto-trio { top: 29%; left: 40%; width: clamp(225px, 23vw, 355px); transform: rotate(-4deg); z-index: 6; }
    .foto-trio-kameni-luk { top: 15%; right: 8%; width: clamp(165px, 15vw, 232px); transform: rotate(7deg); z-index: 5; }
    .foto-trio-naslonjen { top: 44%; left: 26.5%; width: clamp(155px, 14vw, 218px); transform: rotate(-8deg); z-index: 8; }
    .foto-duo-plava-vrata { top: 56%; right: 27%; width: clamp(160px, 14.5vw, 224px); transform: rotate(5deg); z-index: 7; }
    .foto-trio-kamene-stepenice { top: 45%; right: 13%; width: clamp(155px, 13vw, 205px); transform: rotate(-5deg); z-index: 4; }
    .foto-duo-crna-pozadina { top: 46%; left: 4%; right: auto; width: clamp(125px, 10.5vw, 168px); transform: rotate(-6deg); z-index: 7; }

    .nav-note {
      position: absolute;
      z-index: 15;
      top: 18%;
      left: 55%;
      width: 205px;
      padding: 17px 18px 15px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f0e2ca;
      border: 1px solid rgba(91, 61, 41, 0.18);
      color: #38271e;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(58, 36, 23, 0.18);
      transform: rotate(1.5deg);
      transition: transform 260ms ease, box-shadow 260ms ease;
    }
    .nav-note::before {
      content: "";
      position: absolute;
      width: 48px;
      height: 12px;
      top: -6px;
      left: 30px;
      transform: rotate(-3deg);
      background: rgba(245, 234, 211, 0.8);
    }
    .nav-note-label { font-size: 11px; letter-spacing: 2px; font-weight: 700; }
    .nav-note-small { font-size: 11px; opacity: 0.72; }
    .nav-note:hover, .nav-note:focus-visible {
      transform: rotate(0deg) translateY(-3px);
      box-shadow: 0 13px 25px rgba(58, 36, 23, 0.25);
    }

    /* Glavni tunel */
    .main-tunnel {
      position: relative;
      z-index: 1;
      min-height: 70vh;
      padding: clamp(64px, 10vw, 130px) 8vw 85px;
      background: linear-gradient(to bottom, #604735 0, #4b3528 90px, #38271e 220px, #38271e 100%);
      color: #ead7b9;
    }
    .main-tunnel-inner { max-width: 900px; margin: 0 auto; }
    .main-tunnel-kicker {
      margin: 0 0 25px;
      color: #ccad87;
      font-size: 10px;
      letter-spacing: 2.5px;
    }
    .main-tunnel h1 {
      margin: 0 0 32px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(34px, 5vw, 62px);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.02;
    }

    .main-tunnel .tunnel-subtitle,
    .main-tunnel .main-tunnel-content h2.wp-block-heading {
      margin: 54px 0 24px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(25px, 3.4vw, 42px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.08;
      color: #ead7b9;
    }

    .main-tunnel-inner > p:not(.main-tunnel-kicker),
    .main-tunnel-content > p {
      max-width: 700px;
      font-size: clamp(16px, 1.5vw, 19px);
      line-height: 1.9;
    }
    .main-tunnel-content > p { margin: 0 0 1.1em; }
    .main-tunnel-content > h2.wp-block-heading + p { margin-top: 0; }
    .main-tunnel-setup-message { color: #ddc6a5; }
    .back-to-table {
      display: inline-block;
      margin-top: 34px;
      padding-bottom: 2px;
      color: #f0ddbf;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }
    .back-to-table:hover { color: #fff; }

    /* Booking: završni izlaz iz glavnog tunela */
    .booking-inline-link,
    .main-tunnel .main-tunnel-content a:link,
    .main-tunnel .main-tunnel-content a:visited {
      color: #f0ddbf;
      text-decoration-color: #ad8c67;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      transition: color 180ms ease, text-decoration-color 180ms ease;
    }
    .booking-inline-link:hover,
    .main-tunnel .main-tunnel-content a:hover,
    .main-tunnel .main-tunnel-content a:active,
    .main-tunnel .main-tunnel-content a:focus-visible {
      color: #fff;
      text-decoration-color: #f0ddbf;
    }
    .main-tunnel .main-tunnel-content a:focus-visible {
      outline: 2px solid #ccad87;
      outline-offset: 4px;
      border-radius: 2px;
    }
    .booking-section {
      margin-top: 76px;
      padding-top: 42px;
      border-top: 1px solid rgba(234, 215, 185, 0.24);
      scroll-margin-top: 24px;
    }
    .booking-kicker {
      margin: 0 0 12px;
      color: #ccad87;
      font-size: 10px;
      letter-spacing: 2.5px;
    }
    .booking-section > .tunnel-subtitle { margin-top: 0; }
    .booking-intro, .booking-help {
      max-width: 680px;
      color: #ddc6a5;
      font-size: 16px;
      line-height: 1.8;
    }
    .booking-levels {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 28px 0 0;
    }
    .booking-level {
      min-height: 126px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      text-align: left;
      border: 1px solid rgba(234, 215, 185, 0.28);
      background: rgba(234, 215, 185, 0.06);
      color: #ead7b9;
      font-family: inherit;
      cursor: pointer;
      transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
    }
    .booking-level:hover, .booking-level:focus-visible,
    .booking-level[aria-pressed="true"] {
      background: rgba(234, 215, 185, 0.13);
      border-color: #ccad87;
      outline: none;
    }
    .booking-level:hover { transform: translateY(-2px); }
    .booking-level-title { font-weight: 700; font-size: 16px; line-height: 1.3; }
    .booking-level-desc { color: #ccad87; font-size: 12px; line-height: 1.5; }
    .booking-form-wrap {
      margin-top: 32px;
      padding: clamp(20px, 3vw, 34px);
      border: 1px solid rgba(234, 215, 185, 0.22);
      background: rgba(12, 8, 6, 0.16);
      scroll-margin-top: 24px;
    }
    .booking-form-wrap[hidden], .booking-fields[hidden], .booking-no-fit[hidden],
    .booking-feedback[hidden] { display: none !important; }
    .booking-help { margin: 0 0 24px; }
    .booking-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 16px;
      margin-bottom: 24px;
    }
    .booking-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .booking-field > span, .booking-fieldset legend {
      color: #ead7b9;
      font-size: 13px;
      font-weight: 700;
    }
    .booking-field small { color: #ccad87; font-size: 11px; line-height: 1.5; font-weight: 400; }
    .booking-field input, .booking-field select, .booking-field textarea {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(234, 215, 185, 0.25);
      border-radius: 0;
      padding: 12px 13px;
      background: rgba(234, 215, 185, 0.07);
      color: #f0dfc4;
      font: inherit;
      font-size: 14px;
    }
    .booking-field input::placeholder, .booking-field textarea::placeholder { color: rgba(234, 215, 185, 0.55); }
    .booking-field input#bookingEmail::placeholder { color: #a8a29a; opacity: 1; }
    .booking-field input:focus, .booking-field select:focus, .booking-field textarea:focus {
      outline: 2px solid #ccad87;
      outline-offset: 1px;
      border-color: #ccad87;
    }
    .booking-fieldset {
      min-width: 0;
      padding: 0;
      margin: 0 0 26px;
      border: 0;
    }
    .booking-fieldset legend { margin-bottom: 13px; }
    .booking-repertoire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .booking-repertoire label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-height: 48px;
      padding: 12px;
      border: 1px solid rgba(234, 215, 185, 0.2);
      background: rgba(234, 215, 185, 0.035);
      color: #ead7b9;
      font-size: 13px;
      line-height: 1.5;
      cursor: pointer;
    }
    .booking-repertoire label:has(input:checked) { border-color: #ccad87; background: rgba(234, 215, 185, 0.12); }
    .booking-repertoire input { margin-top: 3px; accent-color: #ccad87; flex: 0 0 auto; }
    .booking-contact-note { margin: -6px 0 18px; color: #ccad87; font-size: 12px; line-height: 1.6; }
    .booking-submit, .booking-back-button {
      appearance: none;
      border: 1px solid #ccad87;
      padding: 13px 18px;
      background: #ead7b9;
      color: #38271e;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: background 180ms ease, color 180ms ease;
    }
    .booking-submit:hover, .booking-back-button:hover { background: #fff0d6; }
    .booking-no-fit {
      padding: 26px;
      border-left: 3px solid #ccad87;
      background: rgba(234, 215, 185, 0.07);
    }
    .booking-no-fit p { margin: 0 0 18px; line-height: 1.85; }
    .booking-feedback {
      margin: 22px 0 0;
      padding: 16px 18px;
      border: 1px solid rgba(204, 173, 135, 0.55);
      color: #f0dfc4;
      line-height: 1.7;
    }

    /* Tri glazbena ulaza */
    .csa-sound {
      margin-top: 70px;
      padding-top: 38px;
      border-top: 1px solid rgba(234, 215, 185, 0.24);
    }
    .csa-sound-kicker { margin: 0 0 12px; color: #ccad87; font-size: 10px; letter-spacing: 2.5px; }
    .csa-sound h2 {
      margin: 0 0 15px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }
    .csa-sound-intro { max-width: 640px; margin: 0 0 26px; font-size: 16px; line-height: 1.8; color: #ddc6a5; }
    .csa-track-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .csa-track-choice {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-height: 135px;
      padding: 17px 17px 18px;
      text-align: left;
      border: 1px solid rgba(234, 215, 185, 0.28);
      background: rgba(234, 215, 185, 0.06);
      color: #ead7b9;
      font-family: inherit;
      cursor: pointer;
      transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
    }
    .csa-track-choice:hover, .csa-track-choice:focus-visible {
      background: rgba(234, 215, 185, 0.13);
      border-color: #ccad87;
      transform: translateY(-3px);
      outline: none;
    }
    .track-number { margin-bottom: 18px; color: #ccad87; font-size: 10px; letter-spacing: 2px; }
    .track-name { margin-bottom: 7px; font-size: 17px; line-height: 1.25; font-weight: 700; }
    .track-mood { color: #ccad87; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; }

    /* Priča otvorena s fotografije */
    body.story-open, body.player-open { overflow: hidden; }
    .story-overlay, .cassette-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(40, 26, 19, 0.72);
      backdrop-filter: blur(5px);
    }
    .story-overlay.is-open, .cassette-overlay.is-open { display: flex; }
    .story-modal {
      position: relative;
      width: min(100%, 620px);
      max-height: min(92vh, 860px);
      overflow-y: auto;
      padding: clamp(28px, 5vw, 52px);
      background: #ead7b9;
      color: #38271e;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    }
    .story-close {
      position: absolute;
      top: 12px;
      right: 15px;
      border: 0;
      background: transparent;
      color: #a63f32;
      font-size: 30px;
      cursor: pointer;
    }
    .story-close:focus { outline: 2px solid #a63f32; outline-offset: 3px; }
    .story-kicker { margin: 0 40px 22px 0; color: #896b50; font-size: 10px; letter-spacing: 2px; }
    .story-image {
      display: block;
      width: auto;
      max-width: 100%;
      max-height: 230px;
      height: auto;
      margin: 0 auto 22px;
      padding: 6px;
      background: rgba(249, 240, 223, 0.7);
      box-shadow: 0 5px 15px rgba(58, 36, 23, 0.15);
    }
    .story-modal h2 {
      margin: 0 0 18px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(25px, 4vw, 38px);
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.08;
    }
    .story-modal .story-text { margin: 0 0 25px; font-size: 16px; line-height: 1.8; }
    .story-modal .story-text > p { margin: 0 0 0.9rem; font-size: inherit; line-height: inherit; }
    .story-modal .story-text > p:last-child { margin-bottom: 0; }
    .story-counter { padding-top: 18px; border-top: 1px solid rgba(56, 39, 30, 0.2); color: #896b50; font-size: 11px; letter-spacing: 1.5px; }

    /* CSA player: koristi se originalni fotorealistični render kao lice uređaja */
    .cassette-overlay { z-index: 1100; }
    .cassette-player {
      position: relative;
      width: min(94vw, 1280px, 135vh);
      max-height: 90vh;
      padding: 0;
      background: transparent;
      color: #f0dfc4;
      border: 0;
      box-shadow: none;
      overflow: visible;
    }
    .cassette-scene {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 2;
      isolation: isolate;
      filter: drop-shadow(0 22px 38px rgba(0,0,0,.48));
    }
    .cassette-skin {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 1.3%;
      user-select: none;
      pointer-events: none;
    }
    .skin-track-heading {
      position: absolute;
      left: 31.5%;
      top: 4.7%;
      width: 27.2%;
      height: 9.2%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 2px 5px;
      border-radius: 6px;
      background: linear-gradient(100deg, rgba(28,15,8,.96), rgba(40,22,12,.92));
      box-shadow: inset 0 0 14px rgba(210,155,80,.12), 0 1px 5px rgba(0,0,0,.28);
      color: #f1dfc2;
      text-align: center;
      pointer-events: none;
    }
    .skin-track-title {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font: 700 clamp(10px, 1.65vw, 23px)/1.05 "Courier New", monospace;
      letter-spacing: -.025em;
    }
    .skin-track-artist {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font: clamp(7px, .78vw, 11px)/1.1 Arial, sans-serif;
      letter-spacing: .08em;
      opacity: .86;
    }
    .skin-tape-label {
      position: absolute;
      left: 32.1%;
      top: 24.7%;
      width: 36.4%;
      height: 6.4%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 2px 5px;
      border: 1px solid rgba(92,67,39,.5);
      border-radius: 4px;
      background: linear-gradient(180deg, #e8d9b9, #d8c39b 72%, #c9b387);
      color: #302319;
      box-shadow: inset 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.25);
      text-align: center;
      pointer-events: none;
    }
    .skin-label-title {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font: italic 700 clamp(8px, 1.2vw, 17px)/1.05 "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .skin-label-subtitle {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font: 600 clamp(6px, .68vw, 10px)/1 Arial, sans-serif;
      letter-spacing: .05em;
      opacity: .82;
    }

    /* Roti se samo središnji dio koluta; sam render ostaje fotorealistična baza. */
    .skin-reel {
      position: absolute;
      width: 6.2%;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 2px solid rgba(41,31,21,.9);
      background: conic-gradient(
        #211b15 0deg 15deg, #d5c29d 15deg 27deg,
        #51412e 27deg 45deg, #e4d2ad 45deg 57deg,
        #2b2117 57deg 75deg, #bca47a 75deg 87deg,
        #403225 87deg 105deg, #e8d7b5 105deg 117deg,
        #2a2118 117deg 135deg, #b59a6c 135deg 147deg,
        #403225 147deg 165deg, #e5d4b3 165deg 177deg,
        #251d16 177deg 195deg, #bda57e 195deg 207deg,
        #3d2f22 207deg 225deg, #e0cba3 225deg 237deg,
        #2c2218 237deg 255deg, #c4ae85 255deg 267deg,
        #453626 267deg 285deg, #e2d0af 285deg 297deg,
        #2b2118 297deg 315deg, #c5ab80 315deg 327deg,
        #433424 327deg 345deg, #e1d0ac 345deg 360deg
      );
      box-shadow: inset 0 0 0 3px rgba(226,210,179,.8), 0 0 3px rgba(0,0,0,.75);
      pointer-events: none;
      transform-origin: center;
    }
    .skin-reel::before {
      content: "";
      position: absolute;
      inset: 29%;
      border: 2px solid #c3af88;
      border-radius: 50%;
      background: radial-gradient(circle at 32% 28%, #33271b 0, #0c0a08 72%);
      box-shadow: inset 0 0 3px #000, 0 0 2px rgba(255,232,190,.45);
    }
    .skin-reel::after {
      content: "";
      position: absolute;
      inset: 43%;
      border-radius: 50%;
      background: #d2bd91;
      box-shadow: inset 0 1px 2px rgba(255,255,255,.65), 0 0 2px #090705;
    }
    .skin-reel-left { left: 33.7%; top: 36.4%; }
    .skin-reel-right { left: 55.5%; top: 36.4%; }
    @keyframes skinReelTurn { to { transform: rotate(360deg); } }
    .cassette-scene.is-playing .skin-reel { animation: skinReelTurn 1.7s linear infinite; }
    .cassette-scene.is-playing .skin-reel-right { animation-direction: reverse; }

    /* Stvarna klikabilna područja povrh gumba nacrtanih na renderu. */
    .skin-hotspot {
      position: absolute;
      z-index: 5;
      display: block;
      margin: 0;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .skin-hotspot:hover { background: rgba(255,211,132,.13); border-color: rgba(255,222,164,.28); }
    .skin-hotspot:active { background: rgba(255,211,132,.2); }
    .skin-hotspot:focus-visible { outline: 2px solid #f1c579; outline-offset: 2px; }
    .skin-play[data-active="false"] { background: rgba(17,11,6,.46); box-shadow: inset 0 0 18px rgba(0,0,0,.38); }
    .skin-pause[data-active="true"] { background: rgba(255,197,98,.24); box-shadow: inset 0 0 20px rgba(255,190,82,.2); border-color: rgba(255,222,164,.35); }
    .skin-close { left: 90.4%; top: 16.1%; width: 7.8%; height: 8.5%; border-radius: 50%; }
    .skin-rewind { left: 17.6%; top: 68.4%; width: 11%; height: 10.5%; }
    .skin-stop { left: 29.2%; top: 68.4%; width: 11.3%; height: 10.5%; }
    .skin-play { left: 41.4%; top: 68.4%; width: 13.0%; height: 10.5%; }
    .skin-pause { left: 55.3%; top: 68.4%; width: 11.1%; height: 10.5%; }
    .skin-forward { left: 67.1%; top: 68.4%; width: 10.7%; height: 10.5%; }

    .skin-timeline-panel {
      position: absolute;
      left: 17.4%;
      top: 79.4%;
      width: 59.3%;
      height: 6.2%;
      overflow: hidden;
      border: 1px solid rgba(169,128,71,.35);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(19,15,11,.98), rgba(10,8,6,.98));
      box-shadow: inset 0 2px 5px rgba(0,0,0,.8), 0 1px 2px rgba(239,199,129,.15);
      pointer-events: none;
    }
    .skin-timeline-label {
      position: absolute;
      top: 50%;
      z-index: 2;
      transform: translateY(-50%);
      color: #ead8b9;
      font: clamp(8px, .95vw, 13px)/1 "Courier New", monospace;
      text-shadow: 0 1px 2px #000;
    }
    #cassetteCurrent { left: 19.2%; }
    #cassetteDuration { left: 70.5%; }
    .skin-seek-track {
      position: absolute;
      left: 23.8%;
      top: 81.7%;
      width: 47.0%;
      height: .72%;
      min-height: 4px;
      border: 1px solid rgba(0,0,0,.9);
      border-radius: 99px;
      background: #0d0b09;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.95);
      pointer-events: none;
    }
    .skin-seek-fill {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #b77a31, #f3c778);
      box-shadow: 0 0 4px rgba(244,186,87,.25);
    }
    .skin-seek-knob {
      position: absolute;
      top: 50%;
      left: 0;
      width: clamp(10px, 2.0vw, 23px);
      aspect-ratio: 1;
      border: 1px solid #75552e;
      border-radius: 50%;
      transform: translate(-50%,-50%);
      background: radial-gradient(circle at 30% 25%, #fff0ce, #c7a66b 55%, #76562b);
      box-shadow: 0 1px 5px rgba(0,0,0,.85), inset 0 1px 1px rgba(255,255,255,.7);
    }
    .skin-progress-hit {
      position: absolute;
      z-index: 7;
      left: 22.8%;
      top: 78.6%;
      width: 49.2%;
      height: 7.6%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
    .skin-volume-hit {
      left: 78.0%;
      top: 32.4%;
      width: 19.4%;
      height: 29.7%;
      border-radius: 50%;
      cursor: ns-resize;
      touch-action: none;
    }
    .skin-volume-pointer {
      position: absolute;
      z-index: 6;
      left: 87.6%;
      top: 38.4%;
      width: max(2px, .22%);
      height: 8.2%;
      border-radius: 3px;
      background: linear-gradient(90deg,#5d3b18,#ffe0a1,#8e5e2c);
      box-shadow: 0 0 2px rgba(255,213,143,.8);
      transform-origin: 50% 100%;
      transform: rotate(-21deg);
      pointer-events: none;
    }
    .skin-full-link {
      position: absolute;
      z-index: 6;
      left: 79.8%;
      top: 71.5%;
      width: 15.8%;
      height: 13.5%;
      border-radius: 5px;
      color: transparent;
      text-decoration: none;
      background: transparent;
    }
    .skin-full-link:hover { background: rgba(255,211,132,.10); outline: 1px solid rgba(255,222,164,.22); }
    .skin-full-link:focus-visible { outline: 2px solid #f1c579; outline-offset: 2px; }
    .player-status {
      position: absolute;
      left: 3%;
      bottom: -20px;
      margin: 0;
      max-width: 65%;
      color: #f0dfc4;
      font-size: 11px;
      text-shadow: 0 1px 3px #000;
    }
    .cassette-close { display: none; }
    @media (max-width: 760px) {
      body { padding: 12px; }
      .predsoblje { min-height: calc(100vh - 24px); overflow: hidden; }
      .logo.logo--imprint { top: 20px; right: 18px; left: auto; width: clamp(120px, 30vw, 150px); transform: rotate(-2deg); }
      .photos {
        position: relative;
        inset: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: 23px 12px;
        padding: 105px 15px 26px;
      }
      .foto { position: relative; inset: auto; width: calc(50% - 8px); max-width: 300px; flex: 0 0 calc(50% - 8px); }
      .foto-duo { transform: rotate(-3deg); }
      .foto-atmosfera { transform: rotate(3deg); }
      .foto-rasvjeta { transform: rotate(-2deg); }
      .foto-trio { width: 88%; max-width: 430px; flex-basis: 88%; transform: rotate(1deg); }
      .foto-trio-kameni-luk { transform: rotate(4deg); }
      .foto-trio-naslonjen { transform: rotate(-3deg); }
      .foto-duo-plava-vrata { transform: rotate(3deg); }
      .foto-trio-kamene-stepenice { transform: rotate(-2deg); }
      .foto-duo-crna-pozadina { transform: rotate(2deg); }
      .nav-note { position: relative; top: auto; left: auto; right: auto; width: fit-content; max-width: 100%; margin: 8px auto 28px; }
      .main-tunnel { padding: 58px 22px; }
      .csa-track-options { grid-template-columns: 1fr; }
      .csa-track-choice { min-height: 100px; }
      .booking-levels { grid-template-columns: 1fr; }
      .booking-level { min-height: 0; }
      .booking-grid, .booking-repertoire { grid-template-columns: 1fr; }
      .booking-form-wrap { padding: 20px 15px; }
      .booking-no-fit { padding: 20px 16px; }
      .story-overlay, .cassette-overlay { padding: 14px; }
      .story-modal { padding: 35px 22px 24px; }
      .story-modal .story-text { font-size: 15px; }
      .cassette-player { width: min(96vw, 135vh); }
      .skin-track-title { font-size: clamp(8px, 2.3vw, 14px); }
      .skin-track-artist { font-size: clamp(6px, 1.25vw, 8px); }
      .skin-label-title { font-size: clamp(7px, 1.8vw, 12px); }
      .skin-label-subtitle { font-size: clamp(5px, 1vw, 7px); }
      .player-status { bottom: -17px; font-size: 9px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .foto, .foto figcaption, .nav-note, .csa-track-choice { transition: none; }
      .cassette-scene.is-playing .skin-reel { animation: none; }
    }


/* ČUJ CSA — zaseban tunel za video i cijele izvedbe */
body.csa-cuj-page {
  padding: 0;
  min-height: 100vh;
  background: #241a15;
  color: #ead7b9;
}
body.csa-cuj-page .cuj-tunnel {
  min-height: 100vh;
  padding: clamp(20px, 4.5vw, 58px) clamp(16px, 5vw, 72px) 32px;
  background:
    radial-gradient(ellipse at 83% 6%, rgba(120, 78, 52, .22), transparent 37%),
    linear-gradient(180deg, #2b1f18 0%, #211813 100%);
  color: #ead7b9;
}
.cuj-shell { width: min(100%, 1180px); margin: 0 auto; }
.cuj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 21px;
  border-bottom: 1px solid rgba(204, 173, 135, .48);
}
.cuj-brand { display: inline-flex; align-items: center; gap: 13px; color: #f0dfc4; text-decoration: none; }
.cuj-brand img { display: block; width: clamp(141px, 16.5vw, 213px); max-height: 87px; object-fit: contain; object-position: left center; filter: brightness(2.45) saturate(.82); opacity: .96; }
.cuj-brand span { font-size: 10px; letter-spacing: 2.1px; font-weight: 700; white-space: nowrap; }
.cuj-back-link,
.cuj-video-meta a,
.cuj-footer a { color: #e5c79d; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; border-bottom: 0; padding-bottom: 0; }
.cuj-back-link { font-size: 13px; }
.cuj-back-link:hover,
.cuj-video-meta a:hover,
.cuj-footer a:hover { color: #fff3e3; border-color: #fff3e3; }
.cuj-hero { padding: clamp(40px, 6.5vw, 82px) 0 0; }
.cuj-kicker { margin: 0 0 13px; color: #ccad87; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.cuj-hero h1 {
  margin: 0;
  color: #f2e4ce;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(42px, 7vw, 78px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 700;
}
.cuj-deck { margin: 17px 0 27px; color: #d5bea0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; }
.cuj-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #110d0b; box-shadow: 0 18px 46px rgba(0,0,0,.34); }
.cuj-video-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.cuj-video-meta { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 13px; color: #a99175; font-size: 10px; letter-spacing: 1.7px; }
.cuj-video-meta a { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.cuj-room-layer {
  display: grid;
  grid-template-columns: minmax(190px, .68fr) minmax(0, 1.55fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(64px, 9vw, 118px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(234, 215, 185, .2);
}
.cuj-video-gallery {
  margin-top: clamp(64px, 9vw, 118px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(204, 173, 135, .32);
}
.cuj-video-gallery-heading { margin-bottom: 26px; }
.cuj-video-gallery-heading h2 {
  margin: 0;
  color: #f2e4ce;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 4vw, 45px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.cuj-video-gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}
.cuj-video-stacks { display: grid; gap: 32px; min-width: 0; }
.cuj-video-card { min-width: 0; }
.cuj-video-label { margin: 0 0 11px; color: #ccad87; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
.cuj-video-caption { margin: 10px 0 0; color: #ab9376; font-size: 12px; line-height: 1.55; }
.cuj-video-caption a { color: #d5bea0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-bottom: 0; padding-bottom: 0; }
.cuj-video-caption a:hover { color: #fff3e3; border-color: #fff3e3; }
.cuj-facebook-frame {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  overflow: hidden;
  background: #110d0b;
  box-shadow: 0 18px 46px rgba(0,0,0,.30);
}
.cuj-facebook-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.cuj-video-card-reel { padding: 0 0 0 4px; }
.cuj-room-copy h2,
.cuj-listen-more h2,
.cuj-editor-content h2.wp-block-heading {
  margin: 0 0 16px;
  color: #f2e4ce;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 4vw, 45px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.cuj-room-copy > p:last-child { margin: 0; color: #d5bea0; font-size: 14px; }
.cuj-video-secondary { box-shadow: 0 14px 35px rgba(0,0,0,.25); }
.cuj-video-caption { margin: 10px 0 0; color: #ab9376; font-size: 12px; line-height: 1.55; }
.cuj-editor-content {
  margin-top: clamp(54px, 8vw, 100px);
  padding-top: 34px;
  border-top: 1px solid rgba(234, 215, 185, .2);
}
.cuj-editor-content > * { max-width: 860px; }
.cuj-editor-content p,
.cuj-editor-content li { color: #d9c5a8; font-size: 16px; line-height: 1.85; }
.cuj-editor-content a { color: #f0ddbf; text-decoration-color: #ad8c67; text-underline-offset: 4px; }
.cuj-editor-content .wp-block-embed { width: 100%; margin: 30px 0; }
.cuj-editor-content .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.cuj-editor-content .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.cuj-listen-more {
  margin-top: clamp(64px, 9vw, 110px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(234, 215, 185, .2);
}
.cuj-listen-more h2 { margin-bottom: 12px; }
.cuj-listen-intro { margin: 0 0 25px; color: #d5bea0; font-size: 15px; line-height: 1.75; }
.cuj-track-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cuj-track-links a {
  display: flex;
  min-width: 0;
  min-height: 142px;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 18px;
  border: 1px solid rgba(234, 215, 185, .24);
  background: rgba(234, 215, 185, .045);
  color: #ead7b9;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.cuj-track-links a:hover,
.cuj-track-links a:focus-visible { background: rgba(234, 215, 185, .1); border-color: #ccad87; transform: translateY(-2px); outline: none; }
.cuj-track-links span { color: #ccad87; font-size: 10px; letter-spacing: 1.8px; }
.cuj-track-links strong { color: #f2e4ce; font-size: 17px; line-height: 1.25; }
.cuj-track-links em { margin-top: auto; color: #d5bea0; font-size: 12px; font-style: normal; }
.cuj-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(54px, 8vw, 92px); padding-top: 20px; border-top: 1px solid rgba(234, 215, 185, .2); font-size: 13px; }
.cuj-sound-more,
.csa-sound-more { display: flex; margin-top: 23px; }
.cuj-sound-more a,
.csa-sound-more a:link,
.csa-sound-more a:visited {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(204, 173, 135, .52);
  color: #f0ddbf;
  font-size: 13px;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.cuj-sound-more a:hover,
.cuj-sound-more a:focus-visible,
.csa-sound-more a:hover,
.csa-sound-more a:active,
.csa-sound-more a:focus-visible { color: #fff3e3; background: rgba(234, 215, 185, .09); border-color: #ccad87; outline: none; }
@media (max-width: 760px) {
  body.csa-cuj-page { padding: 0; }
  body.csa-cuj-page .cuj-tunnel { padding: 17px 16px 26px; }
  .cuj-header { align-items: flex-start; }
  .cuj-brand { gap: 9px; }
  .cuj-brand img { width: 129px; max-height: 63px; filter: brightness(2.45) saturate(.82); }
  .cuj-brand span { font-size: 9px; letter-spacing: 1.5px; }
  .cuj-back-link { margin-top: 8px; font-size: 12px; }
  .cuj-hero { padding-top: 46px; }
  .cuj-deck { margin-bottom: 19px; }
  .cuj-video-meta { align-items: flex-start; flex-direction: column; gap: 10px; }
  .cuj-room-layer { grid-template-columns: 1fr; gap: 18px; margin-top: 58px; padding-top: 28px; }
  .cuj-video-gallery { margin-top: 58px; padding-top: 28px; }
  .cuj-video-gallery-grid { grid-template-columns: 1fr; gap: 34px; }
  .cuj-video-stacks { gap: 26px; }
  .cuj-video-card-reel { padding: 0; }
  .cuj-facebook-frame { width: min(100%, 340px); }
  .cuj-track-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cuj-track-links a { min-height: 108px; }
  .cuj-footer { font-size: 12px; }
}
@media (max-width: 480px) {
  .cuj-track-links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cuj-track-links a, .cuj-sound-more a, .csa-sound-more a { transition: none; }
}


/* CSA — javni nastupi i datumi */
.nav-note.nav-note-events {
  top: auto;
  right: 4.5%;
  bottom: 6.5%;
  left: auto;
  width: clamp(170px, 17vw, 218px);
  transform: rotate(-1.2deg);
}
.nav-note.nav-note-events:hover,
.nav-note.nav-note-events:focus-visible { transform: rotate(0deg) translateY(-3px); }

/* Link s fotografskog predsoblja u VIDI CSA */
.nav-note.nav-note-vidi {
  top: auto;
  right: calc(4.5% + clamp(170px, 17vw, 218px) + 14px);
  bottom: 6.5%;
  left: auto;
  width: clamp(155px, 15vw, 195px);
  transform: rotate(1deg);
}
.nav-note.nav-note-vidi:hover,
.nav-note.nav-note-vidi:focus-visible { transform: rotate(0deg) translateY(-3px); }

.csa-gigs-preview {
  margin-top: 62px;
  padding-top: 34px;
  border-top: 1px solid rgba(234, 215, 185, .24);
}
.csa-gigs-kicker {
  margin: 0 0 12px;
  color: #ccad87;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
}
.csa-gigs-preview h2 {
  margin: 0 0 23px;
  color: #ead7b9;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(27px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.csa-gigs-list { display: grid; grid-template-columns: 1fr; gap: 13px; }
.csa-gigs-list--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.csa-gig-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(234, 215, 185, .22);
  background: rgba(234, 215, 185, .045);
  color: #ead7b9;
}
.csa-gig-card--compact { grid-template-columns: 60px minmax(0, 1fr); gap: 13px; padding: 14px; }
.csa-gig-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 102px;
  padding: 10px 4px;
  background: rgba(204, 173, 135, .11);
  color: #f2e4ce;
  text-align: center;
}
.csa-gig-card--compact .csa-gig-date { min-height: 80px; }
.csa-gig-date-day { font-size: 32px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.csa-gig-date-month { margin-top: 4px; color: #e3c59a; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.csa-gig-date-year { margin-top: 4px; color: #bca184; font-size: 10px; }
.csa-gig-card--compact .csa-gig-date-day { font-size: 27px; }
.csa-gig-details { min-width: 0; align-self: center; }
.csa-gig-title { margin: 0 0 8px; color: #f2e4ce; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 21px; line-height: 1.18; letter-spacing: -.02em; }
.csa-gig-card--compact .csa-gig-title { font-size: 17px; }
.csa-gig-meta { margin: 0; color: #d5bea0; font-size: 13px; line-height: 1.65; }
.csa-gig-card--compact .csa-gig-meta { font-size: 12px; }
.csa-gig-description { margin-top: 10px; color: #d5bea0; font-size: 14px; line-height: 1.75; }
.csa-gig-description > :first-child { margin-top: 0; }
.csa-gig-description > :last-child { margin-bottom: 0; }
.csa-gig-link { margin: 13px 0 0; }
.csa-gig-link a,
.csa-gigs-all-link {
  color: #f0ddbf;
  text-decoration: underline;
  text-decoration-color: #ad8c67;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.csa-gig-link a:hover,
.csa-gigs-all-link:hover { color: #fff3e3; }
.csa-gigs-all-link { display: inline-block; margin-top: 20px; font-size: 13px; }

body.csa-events-page {
  padding: 0;
  min-height: 100vh;
  background: #241a15;
  color: #ead7b9;
}
.csa-gigs-page {
  min-height: 100vh;
  padding: clamp(20px, 4.5vw, 58px) clamp(16px, 5vw, 72px) 34px;
  background: radial-gradient(ellipse at 83% 6%, rgba(120, 78, 52, .22), transparent 37%), linear-gradient(180deg, #2b1f18 0%, #211813 100%);
}
.csa-gigs-shell { width: min(100%, 1080px); margin: 0 auto; }
.csa-gigs-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 21px; border-bottom: 1px solid rgba(204, 173, 135, .48); }
.csa-gigs-brand { display: inline-flex; align-items: center; gap: 13px; color: #f0dfc4; text-decoration: none; }
.csa-gigs-brand img { display: block; width: clamp(141px, 16.5vw, 213px); max-height: 87px; object-fit: contain; object-position: left center; filter: brightness(2.45) saturate(.82); opacity: .96; }
.csa-gigs-brand span { font-size: 10px; letter-spacing: 2.1px; font-weight: 700; white-space: nowrap; }
.csa-gigs-back { color: #e5c79d; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; border-bottom: 0; padding-bottom: 0; font-size: 13px; }
.csa-gigs-back:hover { color: #fff3e3; border-color: #fff3e3; }
.csa-gigs-hero { padding: clamp(46px, 7vw, 86px) 0 0; }
.csa-gigs-hero h1 { margin: 0; color: #f2e4ce; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(42px, 7vw, 76px); line-height: .98; letter-spacing: -.045em; font-weight: 700; }
.csa-gigs-deck { margin: 18px 0 34px; color: #d5bea0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; }
.csa-gigs-empty { max-width: 740px; margin: 0; padding: 26px 28px; border-left: 2px solid #ccad87; background: rgba(234, 215, 185, .055); color: #d5bea0; line-height: 1.8; }
.csa-gigs-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(58px, 8vw, 92px); padding-top: 20px; border-top: 1px solid rgba(234, 215, 185, .2); font-size: 13px; }
.csa-gigs-footer a { color: #e5c79d; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; border-bottom: 0; padding-bottom: 0; }
.csa-gigs-footer nav { display:flex; gap:18px; flex-wrap:wrap; }
@media (max-width: 760px) {
  .nav-note.nav-note-events { position: relative; inset: auto; width: fit-content; max-width: calc(100% - 30px); margin: 0 auto 25px; transform: rotate(-1deg); }
  .nav-note.nav-note-vidi { position: relative; inset: auto; width: fit-content; max-width: calc(100% - 30px); margin: 0 auto 25px; transform: rotate(1deg); }
  .csa-gigs-list--compact { grid-template-columns: 1fr; }
  .csa-gig-card--compact { grid-template-columns: 64px minmax(0, 1fr); }
  body.csa-events-page { padding: 0; }
  .csa-gigs-page { padding: 18px 16px 28px; }
  .csa-gigs-header { align-items: flex-start; gap: 12px; }
  .csa-gigs-brand { gap: 9px; }
  .csa-gigs-brand img { width: 129px; max-height: 63px; }
  .csa-gigs-brand span { font-size: 9px; letter-spacing: 1.5px; }
  .csa-gigs-back { margin-top: 8px; font-size: 12px; white-space: nowrap; }
  .csa-gigs-hero { padding-top: 48px; }
  .csa-gig-card--full { grid-template-columns: 70px minmax(0, 1fr); gap: 13px; padding: 13px; }
  .csa-gig-card--full .csa-gig-date { min-height: 88px; }
  .csa-gig-title { font-size: 18px; }
  .csa-gigs-footer { font-size: 12px; }
}
@media (max-width: 420px) {
  .csa-gigs-brand img { width: 94px; }
  .csa-gigs-brand span { font-size: 8px; }
  .csa-gig-card--full { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .csa-gig-card--full .csa-gig-date-day { font-size: 26px; }
  .csa-gig-title { font-size: 16px; }
}

/* VIDI CSA — editorialni fotografski tunel */
body.csa-vidi-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #241a15;
  color: #ead7b9;
}
body.csa-vidi-page .vidi-tunnel {
  min-height: 100vh;
  padding: clamp(20px, 4.5vw, 58px) clamp(16px, 5vw, 72px) 32px;
  background:
    radial-gradient(ellipse at 82% 7%, rgba(120, 78, 52, .22), transparent 37%),
    linear-gradient(180deg, #2b1f18 0%, #211813 100%);
  color: #ead7b9;
}
.vidi-shell { width: min(100%, 1180px); margin: 0 auto; }
.vidi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 21px;
  border-bottom: 1px solid rgba(204, 173, 135, .48);
}
.vidi-brand { display: inline-flex; align-items: center; gap: 13px; color: #f0dfc4; text-decoration: none; }
.vidi-brand img { display: block; width: clamp(141px, 16.5vw, 213px); max-height: 87px; object-fit: contain; object-position: left center; filter: brightness(2.45) saturate(.82); opacity: .96; }
.vidi-brand span { font-size: 10px; letter-spacing: 2.1px; font-weight: 700; white-space: nowrap; }
.vidi-back-link,
.vidi-footer a { color: #e5c79d; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; border-bottom: 0; padding-bottom: 0; }
.vidi-back-link { font-size: 13px; }
.vidi-back-link:hover,
.vidi-footer a:hover { color: #fff3e3; border-color: #fff3e3; }
.vidi-hero {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5.8vw, 74px);
  align-items: center;
  padding: clamp(42px, 6.5vw, 82px) 0 clamp(54px, 8vw, 96px);
}
.vidi-hero-copy { max-width: 410px; }
.vidi-kicker { margin: 0 0 13px; color: #ccad87; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.vidi-hero h1,
.vidi-section-heading h2 {
  margin: 0;
  color: #f2e4ce;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.045em;
}
.vidi-hero h1 { font-size: clamp(48px, 7.3vw, 84px); line-height: .92; }
.vidi-deck { margin: 22px 0 0; color: #d5bea0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.7; max-width: 330px; }
.vidi-image-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.vidi-image-button:focus-visible { outline: 2px solid #f0d2a3; outline-offset: 4px; }
.vidi-hero-image { box-shadow: 0 20px 52px rgba(0,0,0,.34); }
.vidi-hero-image img { display: block; width: 100%; height: clamp(420px, 52vw, 660px); object-fit: cover; object-position: 50% 45%; }
.vidi-image-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 10px 13px;
  background: rgba(34, 24, 18, .86);
  color: #e8d2b3;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
.vidi-portraits,
.vidi-live,
.vidi-moments {
  margin-top: clamp(36px, 5vw, 62px);
  padding-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid rgba(204, 173, 135, .3);
}
.vidi-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.vidi-section-heading .vidi-kicker { margin-bottom: 9px; }
.vidi-section-heading h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1; letter-spacing: -.04em; }
.vidi-section-note { margin: 0 0 2px; color: #bda487; font-size: 12px; line-height: 1.6; text-align: right; }
.vidi-portrait-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; align-items: start; }
.vidi-portrait-card { border: 1px solid rgba(234, 215, 185, .13); }
.vidi-portrait-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 260ms ease, filter 260ms ease; }
.vidi-portrait-card:hover img,
.vidi-live-photo:hover img,
.vidi-moment-photo:hover img { transform: scale(1.025); filter: brightness(1.06); }
.vidi-photo-index { position: absolute; right: 0; bottom: 0; padding: 7px 9px; background: rgba(34, 24, 18, .84); color: #e8d2b3; font-size: 9px; letter-spacing: 1.5px; }
/* Ujednačen raspored arhivskih fotografija: tri stupca i jednaki kadrovi. */
.vidi-live-grid,
.vidi-moments-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.vidi-live-card,
.vidi-moment-card { min-width: 0; margin: 0; }
.vidi-live-photo,
.vidi-moment-photo { background: #110d0b; }
.vidi-live-photo img,
.vidi-moment-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 260ms ease, filter 260ms ease; }
/* Četvrta fotografija zatvara drugi red u sredini, istom veličinom kao ostale. */
.vidi-moments-grid .vidi-moment-card:last-child { grid-column: 2; }
.vidi-live-card figcaption { padding-top: 10px; color: #d5bea0; font-size: 12px; line-height: 1.4; }
.vidi-next-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(52px, 7vw, 82px); }
.vidi-next-paths a { display: flex; min-height: 108px; flex-direction: column; justify-content: space-between; gap: 16px; padding: 17px; border: 1px solid rgba(234, 215, 185, .23); background: rgba(234, 215, 185, .035); color: #ead7b9; text-decoration: none; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.vidi-next-paths a:hover,
.vidi-next-paths a:focus-visible { background: rgba(234, 215, 185, .09); border-color: #ccad87; transform: translateY(-2px); outline: none; }
.vidi-next-paths span { color: #ccad87; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; }
.vidi-next-paths strong { color: #f2e4ce; font-size: clamp(14px, 1.35vw, 17px); line-height: 1.3; }
.vidi-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; padding-top: 20px; border-top: 1px solid rgba(234, 215, 185, .2); color: #d5bea0; font-size: 11px; letter-spacing: 1px; }
.vidi-lightbox { width: min(92vw, 1240px); max-width: none; max-height: 94vh; padding: 12px; border: 1px solid rgba(234, 215, 185, .24); background: #1c130f; color: #ead7b9; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.vidi-lightbox::backdrop { background: rgba(10, 7, 5, .9); backdrop-filter: blur(3px); }
.vidi-lightbox-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 2px 2px 11px; color: #ccad87; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; }
.vidi-lightbox-close { width: 38px; height: 38px; border: 1px solid rgba(234,215,185,.28); background: transparent; color: #f2e4ce; font-size: 27px; line-height: 1; cursor: pointer; }
.vidi-lightbox-close:hover { background: rgba(234,215,185,.1); }
.vidi-lightbox-image { display: block; max-width: 100%; max-height: calc(94vh - 70px); width: auto; height: auto; margin: 0 auto; object-fit: contain; }
@media (max-width: 900px) {
  .vidi-hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; }
  .vidi-portrait-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vidi-live-grid,
  .vidi-moments-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.csa-vidi-page { padding: 0; }
  body.csa-vidi-page .vidi-tunnel { padding: 17px 16px 26px; }
  .vidi-header { align-items: flex-start; }
  .vidi-brand { gap: 9px; }
  .vidi-brand img { width: 129px; max-height: 63px; }
  .vidi-brand span { font-size: 9px; letter-spacing: 1.5px; }
  .vidi-back-link { margin-top: 8px; font-size: 12px; }
  .vidi-hero { grid-template-columns: 1fr; gap: 26px; padding: 43px 0 36px; }
  .vidi-hero-copy { max-width: 100%; }
  .vidi-hero h1 { font-size: clamp(48px, 14vw, 68px); }
  .vidi-deck { margin-top: 17px; }
  .vidi-hero-image img { height: min(118vw, 620px); object-position: center 42%; }
  .vidi-section-heading { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 18px; }
  .vidi-section-note { text-align: left; }
  .vidi-portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vidi-live-grid,
  .vidi-moments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vidi-live-grid .vidi-live-card:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .vidi-moments-grid .vidi-moment-card:last-child { grid-column: auto; }
  .vidi-live-card figcaption { font-size: 11px; }
  .vidi-moments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vidi-moment-card--bubbles,
  .vidi-moment-card--snow-crowd,
  .vidi-moment-card--singalong,
  .vidi-moment-card--crikvenica { grid-column: span 1; }
  .vidi-next-paths { grid-template-columns: 1fr; gap: 9px; margin-top: 48px; }
  .vidi-next-paths a { min-height: 76px; }
  .vidi-footer { font-size: 10px; }
}
@media (max-width: 380px) {
  .vidi-brand img { width: 108px; }
  .vidi-brand span { font-size: 8px; }
  .vidi-portrait-grid { grid-template-columns: 1fr; }
  .vidi-live-grid,
  .vidi-moments-grid { grid-template-columns: 1fr; }
  .vidi-live-grid .vidi-live-card:last-child { grid-column: auto; width: 100%; justify-self: stretch; }
  .vidi-footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .vidi-portrait-card img,
  .vidi-live-photo img,
  .vidi-moment-photo img,
  .vidi-next-paths a { transition: none; }
}


/* CSA — glavna navigacija kao papirići na stolu, od TREBAM BAND nadalje */
.nav-notes-row {
  position: absolute;
  z-index: 35;
  left: clamp(18px, 3.5vw, 50px);
  right: clamp(18px, 3.5vw, 50px);
  bottom: 15px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
}
main.predsoblje .nav-notes-row > a.nav-note {
  position: relative;
  inset: auto;
  flex: 0 1 164px;
  width: clamp(128px, 13vw, 172px);
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 17px 14px 14px;
  border: 1px solid rgba(65, 45, 32, .18);
  border-radius: 1px;
  box-shadow: 0 7px 15px rgba(36, 22, 14, .20), 0 2px 3px rgba(36, 22, 14, .13);
  color: #38271e;
  text-decoration: none;
  gap: 8px;
}
main.predsoblje .nav-notes-row > a.nav-note::before {
  width: 39px;
  height: 10px;
  top: -5px;
  left: 22px;
  opacity: .88;
  background: rgba(255, 248, 228, .64);
}
main.predsoblje .nav-notes-row .nav-note-label { font-size: 10px; letter-spacing: 1.45px; line-height: 1.2; }
main.predsoblje .nav-notes-row .nav-note-small { font-size: 11px; line-height: 1.35; opacity: .78; }
main.predsoblje .nav-notes-row .nav-note--intro { background: #f0e2ca; transform: rotate(-1.4deg); min-height: 74px; }
main.predsoblje .nav-notes-row .nav-note--cuj { background: #c8d7bc; transform: rotate(1.1deg); min-height: 88px; flex-basis: 150px; }
main.predsoblje .nav-notes-row .nav-note--vidi { background: #d9bda9; transform: rotate(-.8deg); min-height: 69px; flex-basis: 155px; }
main.predsoblje .nav-notes-row .nav-note--events { background: #b9cfd3; transform: rotate(1.2deg); min-height: 83px; flex-basis: 150px; }
main.predsoblje .nav-notes-row .nav-note--booking { background: #e4c1cf; transform: rotate(-1.5deg); min-height: 76px; flex-basis: 174px; }
main.predsoblje .nav-notes-row > a.nav-note:hover,
main.predsoblje .nav-notes-row > a.nav-note:focus-visible {
  z-index: 3;
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 13px 22px rgba(36, 22, 14, .26), 0 3px 5px rgba(36, 22, 14, .17);
  outline: 2px solid rgba(255, 243, 227, .88);
  outline-offset: 2px;
}

/* TREBAM BAND — zaseban upitni tunel */
body.csa-booking-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #241a15;
  color: #ead7b9;
}
body.csa-booking-page .csa-booking-tunnel {
  min-height: 100vh;
  padding: clamp(20px, 4.5vw, 58px) clamp(16px, 5vw, 72px) 32px;
  background: radial-gradient(ellipse at 82% 7%, rgba(120, 78, 52, .22), transparent 37%), linear-gradient(180deg, #2b1f18 0%, #211813 100%);
  color: #ead7b9;
}
.csa-booking-shell { width: min(100%, 1080px); margin: 0 auto; }
.csa-booking-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 0 21px; border-bottom:1px solid rgba(204,173,135,.48); }
.csa-booking-brand { display:inline-flex; align-items:center; gap:13px; color:#f0dfc4; text-decoration:none; }
.csa-booking-brand img { display:block; width:clamp(141px,16.5vw,213px); max-height:87px; object-fit:contain; object-position:left center; filter:brightness(2.45) saturate(.82); opacity:.96; }
.csa-booking-brand span { font-size:10px; letter-spacing:2.1px; font-weight:700; white-space:nowrap; }
.csa-booking-back { color:#e5c79d; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; border-bottom:0; padding-bottom:0; font-size:13px; white-space:nowrap; }
.csa-booking-back:hover { color:#fff3e3; border-color:#fff3e3; }
.csa-booking-hero { padding:clamp(46px,7vw,86px) 0 0; }
.csa-booking-kicker { margin:0 0 17px; color:#ccad87; font-size:10px; letter-spacing:2.5px; font-weight:700; }
.csa-booking-hero h1 { margin:0; color:#f2e4ce; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:clamp(42px,7vw,76px); line-height:.98; letter-spacing:-.045em; font-weight:700; }
.csa-booking-deck { margin:18px 0 0; max-width:760px; color:#d5bea0; font-size:clamp(15px,1.6vw,18px); line-height:1.65; }
.csa-booking-content { max-width:930px; margin:clamp(42px,6vw,70px) auto 0 !important; padding-top:0 !important; border-top:0 !important; }
.csa-booking-page .booking-intro { margin:0 0 22px; max-width:720px; }
.csa-booking-page .booking-levels { margin-top:24px; }
.csa-booking-page .booking-form-wrap { margin-top:26px; }
.csa-booking-page .booking-contact-grid { margin-top:24px; margin-bottom:12px; }
.csa-booking-page .booking-feedback { margin:0 0 24px; }
.csa-booking-page .booking-feedback.is-success { border-color:rgba(164,197,150,.7); background:rgba(164,197,150,.08); }
.csa-booking-page .booking-feedback.is-error { border-color:rgba(217,143,126,.72); background:rgba(217,143,126,.08); }
.csa-booking-page .booking-feedback.is-neutral { border-color:rgba(204,173,135,.55); }
.csa-booking-page .booking-cta-link { display:inline-block; margin-top:6px; color:#f0dfc4; border-bottom:0; padding-bottom:0; font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.csa-booking-page .booking-cta-link:hover { color:#fff3e3; }
.csa-booking-page .csa-booking-next-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:clamp(54px,8vw,88px); }
.csa-booking-page .csa-booking-next-paths a { display:flex; flex-direction:column; gap:12px; min-height:74px; padding:16px; border:1px solid rgba(234,215,185,.24); color:#ead7b9; text-decoration:none; background:rgba(234,215,185,.035); }
.csa-booking-page .csa-booking-next-paths a:hover { background:rgba(234,215,185,.09); border-color:#ccad87; }
.csa-booking-page .csa-booking-next-paths span { color:#ccad87; font-size:9px; letter-spacing:1.8px; }
.csa-booking-page .csa-booking-next-paths strong { font-size:14px; }
.csa-booking-page .csa-booking-footer { display:flex; justify-content:space-between; gap:20px; margin-top:30px; padding-top:20px; border-top:1px solid rgba(234,215,185,.2); font-size:13px; }
.csa-booking-page .csa-booking-footer a { color:#e5c79d; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; border-bottom:0; padding-bottom:0; }
.csa-honeypot { position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.booking-section--callout .booking-cta-link { display:inline-block; color:#f0dfc4; border-bottom:0; padding-bottom:0; font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:#ad8c67; }
.booking-section--callout .booking-cta-link:hover { color:#fff3e3; }

@media (max-width: 900px) {
  main.predsoblje .nav-notes-row { gap:9px; left:18px; right:18px; }
  main.predsoblje .nav-notes-row > a.nav-note { flex-basis:0; flex-grow:1; padding:15px 10px 12px; }
  main.predsoblje .nav-notes-row .nav-note-label { letter-spacing:1px; font-size:9px; }
  main.predsoblje .nav-notes-row .nav-note-small { font-size:10px; }
}
@media (max-width: 760px) {
  .nav-notes-row { position:relative; inset:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:5px 15px 29px; }
  main.predsoblje .nav-notes-row > a.nav-note { width:100%; max-width:none; flex:auto; min-height:74px; padding:16px 13px 13px; margin:0; }
  main.predsoblje .nav-notes-row .nav-note--cuj,
  main.predsoblje .nav-notes-row .nav-note--events { min-height:84px; }
  main.predsoblje .nav-notes-row .nav-note--booking { grid-column:1 / -1; justify-self:center; width:min(100%, 230px); }
  body.csa-booking-page .csa-booking-tunnel { padding:18px 16px 28px; }
  .csa-booking-header { align-items:flex-start; gap:12px; }
  .csa-booking-brand { gap:9px; }
  .csa-booking-brand img { width:129px; max-height:63px; }
  .csa-booking-brand span { font-size:9px; letter-spacing:1.5px; }
  .csa-booking-back { margin-top:8px; font-size:12px; }
  .csa-booking-hero { padding-top:48px; }
  .csa-booking-content { margin-top:42px !important; }
  .csa-booking-page .csa-booking-next-paths { grid-template-columns:1fr; }
  .csa-booking-page .csa-booking-footer { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-notes-row .nav-note { transition:none; }
}


/* Jasna naznaka tekstualnih poveznica; navigacijski papirići i velike klikabilne kartice ostaju bez podcrtavanja. */
.booking-cta-link,
.csa-booking-back,
.csa-booking-footer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-bottom: 0;
  padding-bottom: 0;
}
.booking-cta-link { color: #f0ddbf; text-decoration-color: #ad8c67; }
.csa-booking-back,
.csa-booking-footer a { color: #e5c79d; text-decoration-color: rgba(229, 199, 157, .65); }
.booking-cta-link:hover,
.csa-booking-back:hover,
.csa-booking-footer a:hover { color: #fff3e3; }