/* /calaveraerdtm: Calavera, Goya 2022 nominations.
   Desktop reproduces the Wix mesh: one grid column the width of the 980px stage, every block placed
   in a grid row with Wix's own margins and horizontal offset (as a % of the stage, so 768-1279 still fits).
   Mobile (< 768px) reproduces the 320px Wix mobile layout in --u units.
   Deliberate deviation (mobile): on Wix the page section ends 41px short of the second column, so the
   footer covers its last line, Alfonso's signature "Alfonso G. Aguilar (Compositor y Productor)".
   Here the footer sits below the text, which makes the mobile page about 61 Wix px taller. */

.cal {
  --cal-ink: #310059;
  --cal-yellow: #ffb700;
  --pu: 1px; /* player unit: 1px on desktop, 1 --u on mobile */
}

.cal-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(14, min-content) 1fr;
  width: min(980px, 100% - 40px);
  margin-inline: auto;
}
.cal-grid > * {
  position: relative;
  justify-self: start;
  align-self: start;
  grid-column: 1;
  margin: 0;
  margin-left: calc(var(--l) / 980 * 100%);
  width: calc(var(--w) / 980 * 100%);
  max-width: 100%;
}

/* ---------- Text ---------- */
.cal-head {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: var(--cal-ink);
}
.cal-title, .cal-composers { font-size: 21px; line-height: 25px; }
.cal-listen, .cal-awards { font-size: 18px; line-height: 22px; }
.cal-yellow { color: var(--cal-yellow); }
.cal-awards { font-weight: 400; }
.cal-awards strong { font-weight: 700; }
.cal-awards::after { content: "\a0"; display: block; line-height: 21px; } /* the trailing empty line of the Wix text box (Work Sans there, 1px shorter) */

.cal-text {
  font-family: var(--font-work);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.25em;
  text-align: justify;
  color: var(--cal-ink);
}
.cal-text p + p { margin-top: 1.25em; }

/* ---------- Desktop placement (Wix mesh rows, margins and left offsets) ---------- */
.cal-title      { grid-row: 1;      --l: 133; --w: 780; margin-top: 34px; margin-bottom: 38px; }
.cal-listen     { grid-row: 2;      --l: 133; --w: 780; margin-bottom: 6px; }
.cal-player     { grid-row: 3;      --l: 216; --w: 614; }
.cal-goya       { grid-row: 4;      --l: 480; --w: 87;  margin-bottom: 21px; }
.cal-awards     { grid-row: 5;      --l: 133; --w: 780; margin-bottom: 10px; }
.cal-btn        { grid-row: 6;      --l: 389; --w: 268; margin-bottom: 10px; }
.cal-intro      { grid-row: 8;      --l: 10;  --w: 453; margin-bottom: 35px; }
.cal-video      { grid-row: 9;      --l: 10;  --w: 417; margin-bottom: 10px; }
.cal-poster     { grid-row: 8 / 11; --l: 494; --w: 486; margin-bottom: 10px; }
.cal-composers  { grid-row: 12;     --l: 133; --w: 780; margin-bottom: 34px; }
.cal-article    { grid-row: 13;     --l: 0;   --w: 459; }
.cal-col1       { grid-row: 14;     --l: 0;   --w: 462; margin-bottom: 52px; }
.cal-col2       { grid-row: 13 / 16; --l: 518; --w: 462; margin-top: 245px; margin-bottom: 10px; }
.cal-wedge      { --l: 0; --w: 0; visibility: hidden; pointer-events: none; }
.cal-wedge-8    { grid-row: 1 / 8;  height: 520px; }
.cal-wedge-12   { grid-row: 1 / 12; height: 1046px; }

/* ---------- Images, video, article card ---------- */
.cal-goya { aspect-ratio: 1; height: auto; }
.cal-poster { aspect-ratio: 486 / 405; height: auto; object-fit: cover; }
.cal-article { display: block; }
.cal-article img { width: 100%; aspect-ratio: 459 / 547; height: auto; object-fit: cover; }
.cal-video { aspect-ratio: 417 / 238; background: #000; }
.cal-video .video-facade { position: absolute; inset: 0; }
.cal-video .video-facade:focus-visible { outline-offset: 2px; }

/* ---------- Button: Wix yellow button, hover = 70% black with white text ---------- */
.cal-btn {
  display: flex; align-items: center; justify-content: center;
  height: 46px;
  background: var(--cal-yellow);
  color: #000;
  font: 700 20px/1.4em var(--font-ui);
  letter-spacing: -0.027em; /* Figtree is wider than Proxima Nova: match the label width */
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .4s ease, color .4s ease;
}
.cal-btn:hover { background: rgba(0, 0, 0, .7); color: #fff; }

/* ---------- Audio player (rebuild of the Wix "classic" music player) ---------- */
.cal-player {
  display: flex;
  height: calc(70 * var(--pu));
  background: #fff;
  color: #000;
  overflow: hidden;
  text-align: left;
  font-family: var(--font-work);
  font-weight: 200;
  font-size: calc(18 * var(--pu));
}
.cal-player-cover { flex: 0 0 calc(70 * var(--pu)); width: calc(70 * var(--pu)); height: calc(70 * var(--pu)); }
.cal-player-cover img { width: 100%; height: 100%; object-fit: cover; }
.cal-player-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  padding: calc(6 * var(--pu)) calc(16 * var(--pu));
  overflow: hidden;
}
.cal-player-titles { display: flex; overflow: hidden; white-space: nowrap; line-height: 1; }
.cal-player-track, .cal-player-artist {
  display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1;
}
.cal-player-artist { opacity: .6; }
.cal-player-artist::before { content: "-"; padding: .4em; }
.cal-player-row { display: flex; align-items: center; width: 100%; }
.cal-play {
  flex: 0 0 auto;
  display: block;
  width: calc(18 * var(--pu)); height: calc(20 * var(--pu));
  margin-right: calc(14 * var(--pu));
  padding: 0; border: 0; background: none;
  color: #000; cursor: pointer;
  transition: color .4s, opacity .4s;
}
.cal-play:hover { color: #c6c6c6; }
.cal-play svg { width: 100%; height: 100%; fill: currentColor; }
.cal-play .cal-icon-pause { display: none; }
.cal-play[data-playing] .cal-icon-play { display: none; }
.cal-play[data-playing] .cal-icon-pause { display: block; }

.cal-progress {
  flex: 1 1 auto;
  position: relative;
  height: calc(4 * var(--pu));
  margin: calc(8 * var(--pu)) 0;
  color: #000;
}
.cal-progress::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50px; background: currentColor; opacity: .2;
}
.cal-buffered {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 50px; background: transparent; color: currentColor; opacity: .3;
  pointer-events: none;
}
.cal-buffered::-webkit-progress-bar { background: transparent; border-radius: 50px; }
.cal-buffered::-webkit-progress-value { background: currentColor; border-radius: 50px; }
.cal-buffered::-moz-progress-bar { background: currentColor; border-radius: 50px; }

.cal-seek {
  --value: 0%;
  position: absolute; top: calc(-8 * var(--pu)); left: 0;
  display: block;
  box-sizing: content-box;
  width: 100%; height: calc(4 * var(--pu));
  margin: 0; padding: calc(8 * var(--pu)) 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; border-radius: 50px;
  color: currentColor; cursor: pointer;
  transition: color .3s;
}
.cal-seek:hover { color: #c6c6c6; }
.cal-seek:focus { outline: none; }
.cal-seek:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.cal-seek::-webkit-slider-runnable-track {
  height: 100%;
  background: linear-gradient(to right, currentColor var(--value), transparent var(--value));
  border: 0; border-radius: 50px;
}
.cal-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: calc(4 * var(--pu)); height: calc(4 * var(--pu));
  margin: 0; border: 0; border-radius: 50px;
  background: #000;
  transition: transform .3s;
}
.cal-seek:hover::-webkit-slider-thumb, .cal-seek:active::-webkit-slider-thumb { transform: scale(3); }
.cal-seek::-moz-range-track { height: 100%; background: transparent; border: 0; border-radius: 50px; }
.cal-seek::-moz-range-progress { height: 100%; background: currentColor; border-radius: 50px; }
.cal-seek::-moz-range-thumb {
  width: calc(4 * var(--pu)); height: calc(4 * var(--pu));
  border: 0; border-radius: 50px; background: #000;
  transition: transform .3s;
}
.cal-seek:hover::-moz-range-thumb, .cal-seek:active::-moz-range-thumb { transform: scale(3); }
.cal-seek::-moz-focus-outer { border: 0; }

.cal-time {
  flex: 0 0 auto;
  display: block;
  padding: calc(4 * var(--pu)) 0 calc(4 * var(--pu)) calc(12 * var(--pu));
  font: 400 calc(12 * var(--pu)) / 1 var(--font-system);
  white-space: nowrap;
  opacity: .6;
}
.cal-time-left { display: none; }

/* ---------- Narrow desktops (768-1019px): the stage shrinks, keep blocks inside it ---------- */
@media (min-width: 768px) and (max-width: 1019px) {
  .cal-title, .cal-listen, .cal-awards, .cal-composers { --l: 60; --w: 860; }
  .cal-player { --l: 120; --w: 740; }
  .cal-goya { width: 87px; margin-left: calc(50% - 43.5px); }
  .cal-btn { --l: 356; --w: 268; min-width: 220px; }
}

/* ---------- Mobile: the Wix 320px layout ---------- */
@media (max-width: 767px) {
  .cal { --pu: var(--u); }
  .cal-grid {
    width: calc(320 * var(--u));
    grid-template-rows: repeat(12, min-content) 1fr;
  }
  .cal-grid > * {
    margin-left: calc(var(--l) * var(--u));
    width: calc(var(--w) * var(--u));
  }
  .cal-wedge { display: none; }

  .cal-title      { grid-row: 1;  --l: 10;  --w: 300; margin: calc(10 * var(--u)) 0 calc(11 * var(--u)) calc(10 * var(--u)); }
  .cal-player     { grid-row: 2;  --l: 10;  --w: 300; margin-bottom: calc(14 * var(--u)); }
  .cal-listen     { grid-row: 3;  --l: 10;  --w: 300; margin-bottom: calc(6 * var(--u)); }
  .cal-goya       { grid-row: 4;  --l: 120; --w: 80;  margin-bottom: calc(10 * var(--u)); }
  .cal-awards     { grid-row: 5;  --l: 10;  --w: 300; margin-bottom: calc(10 * var(--u)); }
  .cal-intro      { grid-row: 6;  --l: 10;  --w: 300; margin-bottom: calc(22 * var(--u)); }
  .cal-video      { grid-row: 7;  --l: 10;  --w: 300; margin-bottom: calc(43 * var(--u)); aspect-ratio: 300 / 170; }
  .cal-poster     { grid-row: 8;  --l: 49;  --w: 222; margin-bottom: calc(6 * var(--u)); }
  .cal-btn        { grid-row: 9;  --l: 60;  --w: 200; margin-bottom: calc(58 * var(--u)); }
  .cal-composers  { grid-row: 10; --l: 10;  --w: 300; margin-bottom: calc(9 * var(--u)); }
  .cal-article    { grid-row: 11; --l: 20;  --w: 280; }
  .cal-col1       { grid-row: 12; --l: 10;  --w: 300; margin-bottom: calc(41 * var(--u)); }
  .cal-col2       { grid-row: 13; --l: 10;  --w: 300; margin-top: 0; margin-bottom: calc(20 * var(--u)); }

  /* Chrome rounds Montserrat's "normal" line height at Wix's 320px sizes (19px -> 23, 16px -> 19): keep those steps */
  .cal-title, .cal-composers { font-size: calc(19 * var(--u)); line-height: calc(23 * var(--u)); }
  .cal-listen, .cal-awards { font-size: calc(16 * var(--u)); line-height: calc(19 * var(--u)); }
  .cal-awards::after { line-height: calc(19 * var(--u)); }
  .cal-text { font-size: calc(17 * var(--u)); }
  .cal-poster { aspect-ratio: 222 / 185; }
  .cal-article img { aspect-ratio: 280 / 333; }
  .cal-btn { height: calc(48 * var(--u)); font-size: calc(18 * var(--u)); }

  .cal-time-full { display: none; }
  .cal-time-left { display: inline; }
}