/* v12 styles: v6 responsiveness + v10 styling hooks */
.jeat12x-wrapper{
  --hour-width: 100px;
  --hours: 8;
  --line: #e0e0e0;
  --event-bg: #63a4e4;
  --event-fg: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
  box-sizing: border-box;
}

/* time scale (horizontal labels for vertical orientation) */
.jeat12x-time-scale{
  position: relative;
  height: 32px;
  min-width: calc(var(--hours) * var(--hour-width));
  background:
    linear-gradient(var(--line),var(--line)) bottom/100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px, transparent var(--hour-width));
}
.jeat12x-time-label{ position:absolute; top:4px; transform:translateX(-50%); white-space:nowrap; }

/* stage header */
.jeat12x-stage-cols{
  display:flex;
  min-width: calc(var(--hours) * var(--hour-width));
  background:
    linear-gradient(var(--line),var(--line)) bottom/100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px, transparent var(--hour-width));
}
.jeat12x-stage-header{ flex:1 0 0; text-align:center; padding:8px 6px; }

/* row container */
.jeat12x-row{ display:flex; align-items:stretch; }
.jeat12x-row + .jeat12x-row{ border-top:1px solid var(--line); }

/* stage track where events are placed (vertical orientation) */
.jeat12x-stage-track{
  position: relative;
  height: 120px;
  min-width: calc(var(--hours) * var(--hour-width));
  background:
    repeating-linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px, transparent var(--hour-width));
}

/* events */
.jeat12x-event{
  position:absolute;
  top: 18px;
  height: 84px;
  background: var(--event-bg);
  color: var(--event-fg);
  border-radius: 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:4px 6px;
  text-align:center;
  overflow:hidden;
}
.jeat12x-event-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jeat12x-event-time{ opacity:.9; line-height:1.1; }

/* Horizontal orientation (stages on columns, time goes down) */
.jeat12x-h-time{
  min-height: calc(var(--hours) * 60px);
  background:
    linear-gradient(var(--line),var(--line)) right/1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 60px);
}
.jeat12x-h-time .jeat12x-time-label{ left: 8px; transform:none; }
.jeat12x-h-row{ display:flex; }
.jeat12x-h-stage-label{ width: 140px; border-right:1px solid var(--line); display:flex; align-items:center; justify-content:flex-start; padding:8px; }
.jeat12x-h-track{
  position: relative;
  flex:1 1 auto;
  min-height: calc(var(--hours) * 60px);
  background:
    repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 60px);
}
.jeat12x-h-track .jeat12x-event{
  position:absolute;
  left: 12px; right: 12px;
  height: auto;
}

/* even/odd helpers (background colours set via Elementor selectors) */
.jeat12x-even-row{}
.jeat12x-odd-row{}
.jeat12x-even-col{}
.jeat12x-odd-col{}