/* --- CALENDAR NAVIGATION (PLUGIN UI) --- */
:root[data-force-color-mode="dark"] {
  --c-icons:           #E8DFD066;
  --c-border-next-concert:  rgba(201, 162, 75, 0.35);
  --c-calendar-button-bkg::rgba(0,0,0,0);
  --c-calendar-button-bkg-active::rgba(0,0,0,0);
}

:root[data-force-color-mode="light"] {
  --c-icons:           #2A1F1A66;
  --c-border-next-concert:  rgba(139, 26, 26, 0.30);
  --c-calendar-button-bkg::rgba(0,0,0,0);
  --c-calendar-button-bkg-active::rgba(0,0,0,0);
}

.tour-controls {
  margin-bottom: 1.5rem;
}

.tour-nav {
  display: flex;
  gap: 0.5rem;
}

.tour-nav button {
    /*background: var(--c-calendar-button-bkg);border-radius: 20px;
    transition: background 0.2s;*/
    background: var(--c-calendar-button-bkg);
    padding: 6px 12px;
    border: none;
    cursor: pointer;
    color:currentColor;
    font-size: 12px;
}

.tour-nav button:hover { 

  background: var(--c-calendar-button-bkg-active);border:none;}

.tour-nav button.active { 
  background: var(--c-calendar-button-bkg-active);border-bottom:1px dotted grey;
}



/*-------TODO: Move those to their own Editor CSS file -----------------*/
.medium-editor-element #tour-dates-container {
  border:1px dotted grey;padding:2px;
}

.medium-editor-element #tour-dates-container>.concert-item{border:1px dotted green;}


.concert-insert-zone {display:none;}
/* Make the insert zone clickable but discreet */
.medium-editor-element .concert-insert-zone {
  display:block;
  min-height: 20px; /* Gives the user a target to click */
  margin: 10px 0;
  border: 1px dashed transparent; 
  transition: border 0.2s;
  list-style: none; /* Hide the number if it's an ordered list */
}

/* Optional: Show a guide when the user hovers over the space */
.medium-editor-element .concert-insert-zone:hover {
  border-color: #ccc;
  cursor: text;
}

/* Optional: Highlight it when the cursor is actually inside it */
.medium-editor-element .concert-insert-zone:focus {
  border-color: #007bff;
  outline: none;
}


/* --- CALENDAR LAYOUT --- */
.concert-list{
  list-style: none;
  margin: 0;
  /*padding: 0;*/
  width: 100%;
  box-sizing: border-box;
}


.concert-item,article li.concert-item {
  display: flex;
  flex-direction:column;
  align-items: stretch; /* Allows header to stretch to the date box's height */
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  /*border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  */ /* Optional: Use theme variables if available */
  border-bottom: 1px solid var(--c-border);
  transition: all 0.2s ease;
  width: 100%; /* Fix 3: Extends to the article's full width */
  box-sizing: border-box;
  /* Fix 2: Background color removed so the component inherits the site's theme */
}

/* --- NEXT EVENT HIGHLIGHT: a full box, zero ambiguity ---
   A bottom/left edge can read as belonging to the neighbouring item, so
   the next concert gets a closed box: accent border, faint tint, and a
   "NEXT" chip anchored to the box itself. */
.concert-item.is-next {
  position: relative;
  /*border: 1px solid var(--c-accent);*/
  border-radius: 8px;
  /*background: color-mix(in srgb, var(--c-accent) 6%, transparent);*/
  /* override the default bottom-rule + paddings so the box reads as a box */
  /*border-bottom: 1px solid var(--c-accent);
  padding-bottom: 0.75rem;*/
}

.concert-item.is-next::before {
  content: "NEXT";
  position: absolute;
  top: -9px;
  right: 10px;
  background: var(--c-accent);
  color: #fff;

  letter-spacing: 0.14em;
  padding: 0 8px;
  rotate: -12deg;
  

}
  /*border-radius: 999px;*/
  /*font: 700 9px/1.9 -apple-system, BlinkMacSystemFont, sans-serif;*/
/*.concert-item.is-next .concert-date-box {
  border: 1px solid var(--c-accent);
}*/

/* --- THE DATE BOX --- */
.concert-date-box {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items:baseline;
  /*justify-content: center;*/
  /*border: 1px solid var(--c-border);*/
  border-radius: 0px;
  /*padding: 0.5rem 0.25rem 0.75rem;*/
  /*width: 80px;
  height: 80px;*/
  /* Background color removed to inherit the site's theme */
}
.concert-date-box>* {padding-right:1rem;}

.date-ddmm {
  font-family: 'Lulo Clean W01 One Bold', sans-serif;
  
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
}

.date-time {
  font-size: 1.1rem;
  font-weight: 500;
}

.date-yyyy {
  display:none;
  font-size: 1rem;
  font-weight: 500;
}

/* Multilingual Weekday Letters via CSS */
.concert-date-box::after {
  font-size: .8rem;
  font-weight: 800;
}

/* DEFAULT (English) */
.concert-date-box[data-day="0"]::after { content: 'S'; }
.concert-date-box[data-day="1"]::after { content: 'M'; }
.concert-date-box[data-day="2"]::after { content: 'T'; }
.concert-date-box[data-day="3"]::after { content: 'W'; }
.concert-date-box[data-day="4"]::after { content: 'Th'; }
.concert-date-box[data-day="5"]::after { content: 'F'; }
.concert-date-box[data-day="6"]::after { content: 'S'; }

/* SPANISH */
:is(.locale-es, :lang(es)) .concert-date-box[data-day="0"]::after { content: 'D'; }
:is(.locale-es, :lang(es)) .concert-date-box[data-day="1"]::after { content: 'L'; }
:is(.locale-es, :lang(es)) .concert-date-box[data-day="2"]::after { content: 'M'; }
:is(.locale-es, :lang(es)) .concert-date-box[data-day="3"]::after { content: 'X'; }
:is(.locale-es, :lang(es)) .concert-date-box[data-day="4"]::after { content: 'J'; }
:is(.locale-es, :lang(es)) .concert-date-box[data-day="5"]::after { content: 'V'; }
:is(.locale-es, :lang(es)) .concert-date-box[data-day="6"]::after { content: 'S'; }

/* FRENCH */
:is(.locale-fr, :lang(fr)) .concert-date-box[data-day="0"]::after { content: 'D'; }
:is(.locale-fr, :lang(fr)) .concert-date-box[data-day="1"]::after { content: 'L'; }
:is(.locale-fr, :lang(fr)) .concert-date-box[data-day="2"]::after { content: 'M'; }
:is(.locale-fr, :lang(fr)) .concert-date-box[data-day="3"]::after { content: 'Me'; }
:is(.locale-fr, :lang(fr)) .concert-date-box[data-day="4"]::after { content: 'J'; }
:is(.locale-fr, :lang(fr)) .concert-date-box[data-day="5"]::after { content: 'V'; }
:is(.locale-fr, :lang(fr)) .concert-date-box[data-day="6"]::after { content: 'S'; }

/* GERMAN */
:is(.locale-de, :lang(de)) .concert-date-box[data-day="0"]::after { content: 'So'; }
:is(.locale-de, :lang(de)) .concert-date-box[data-day="1"]::after { content: 'Mo'; }
:is(.locale-de, :lang(de)) .concert-date-box[data-day="2"]::after { content: 'Di'; }
:is(.locale-de, :lang(de)) .concert-date-box[data-day="3"]::after { content: 'Mi'; }
:is(.locale-de, :lang(de)) .concert-date-box[data-day="4"]::after { content: 'Do'; }
:is(.locale-de, :lang(de)) .concert-date-box[data-day="5"]::after { content: 'Fr'; }
:is(.locale-de, :lang(de)) .concert-date-box[data-day="6"]::after { content: 'Sa'; }

/* --- CONCERT DETAILS --- */
.concert-details {
  display: contents;
}

.concert-header {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between; /* Fix 4 & 5: Venue to top, City to bottom */
  padding: 0 0; /* Optical adjustment to align text perfectly with the date box edges */
}

.concert-venue {
  /*font-size: 1.1rem;*/
  font-weight: 700;
  line-height: 1;
  min-width:0;
  /*border:1px green solid;*/
  color:var(--c-text);
  position: relative;
  display: inline-flex;
}
.concert-venue:hover {
  text-decoration:none;
}
a.concert-venue::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    margin-left: 5px;
    border-radius: 50%;
    background: #c9c4b4;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
    transition: background 0.25s ease, box-shadow 0.25s ease;
  	display: none;
}
a.concert-venue:hover:after {
  	display: inline-flex;
    background: #ffb64d;
    box-shadow: 0 0 6px 1px rgba(255,182,77,.75);
}



.concert-city {
  font-size: 0.95rem;
}

.concert-description {
  grid-column: 1; /* Fix 6: Aligned to Venue/City on the left, extends fully to the right */
  grid-row: 3;
  margin: 0;
  line-height: 1.4;
  font-size: 0.9rem;
  /* Text color removed to inherit theme */
}

/* --- ICONS (ACTIONS) --- */
.concert-actions {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  /*
  flex-wrap: no-wrap;align-self: center;*/ 
  min-width: max-content; /* Fix 7: Forces the box to retain width, preventing squishing */
}

.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:  0 0.5rem 0 0;
  /*background: #f0f0f0;*/
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.2s;
}

.action-icon:hover {
  /*background: #e0e0e0;
  color: #000;*/
}

.action-icon.tickets-btn {
  /*background: #007bff;
  color: #fff;*/
}

.action-icon.tickets-btn:hover {
  /*background: #0056b3;*/
}

.popup-icon--32 {
  width: 32px;
  height: 32px;
}

.popup-icon--24 {
  width: 24px;
  height: 24px;
}

.popup-icon--16 {
  width: 16px;
  height: 16px;
}

.popup-icon--band-tour-size {
  width: 24px;
  height: 24px;
}

.popup-icon--link {
  --popup-icon-url: url('/galana/media/icons/links.svg');
  /*--popup-icon-color:#729fcfff;*/
}

.popup-icon--road-sign {
  --popup-icon-url: url('/galana/media/icons/road-sign.svg');
  /*--popup-icon-color:#fcaf3eff;*/
}

.popup-icon--external-link {
  --popup-icon-url: url('/galana/media/icons/arrow-square-out.svg');
  /*--popup-icon-color:#3465a4ff;*/
}

.popup-icon--ticket {
  --popup-icon-url: url('/galana/media/icons/ticket.svg');
  /*--popup-icon-color:#4e9a06ff;*/
}

/*************PAST ITEMS**************/
.concert-item.is-past, .concert-item.is-past .concert-venue {
  color:rgba(194,194,194,1);
  border-bottom: 1px solid var(--c-border);
}
.concert-item.is-past a.tickets-btn{
  display:none;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE (≤640px) — single-line entries
   ─────────────────────────────────────
   Row 1:  [ 30/09 · 20:00 ]  Venue name, one line, ellipsis
   Row 2:  city (muted, one line) · description (muted, clamped)
   Row 3:  the four action icons in a row, right-aligned

   The date becomes a pill on a single line — year and weekday-letter
   are hidden (they only fit the desktop box), and the venue stays
   predominant because it never wraps.
   ═══════════════════════════════════════════════════════════════════ */
/*@media (max-width: 640px) {
  .concert-item, article li.concert-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.3rem 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  
  .concert-date-box {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    height: auto;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
  }
  .date-ddmm { font-size: 1rem; font-weight: 800; }
  .date-ddmm::after {
    content: "·";
    margin-left: 0.35rem;
    color: var(--c-muted);
    font-weight: 400;
  }
  .date-time { font-size: 0.9rem; color: var(--c-muted); }
  
  .date-yyyy        { display: none; }
  .concert-date-box::after { display: none; } 

  
  .concert-header {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;                 
  }
  .concert-venue {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .concert-city {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--c-muted);
  }

  .concert-description {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.85rem;
    color: var(--c-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

 
  .concert-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-end;
    min-width: 0;
    gap: 0.5rem;
  }
  .action-icon { padding: 0.4rem; }
  .popup-icon--band-tour-size { width: 20px; height: 20px; }

  
  .concert-item.is-next { padding: 0.6rem; }
  .concert-item.is-next::before { top: -8px; right: 8px; }
}*/