/* Sol Obra CodePen MYpEeKy — play detail */

body.page-play-detail {
  background: var(--color-marfil);
  color: var(--color-carbon);
}

body.page-play-detail a {
  color: inherit;
}

body.page-play-detail button {
  font: inherit;
}

body.page-play-detail .work-detail img {
  display: block;
}

/* ========================================
   GENERAL SITE CONTAINER
======================================== */

.page-container {
  width:
    min(100% - 64px, 1440px);

  margin-inline: auto;
}


/*
  75% del ancho usable del sitio.
  El cuarto derecho queda intencionalmente vacío.
*/

.work-content {
  width: 75%;
}


/* ========================================
   PAGE
======================================== */

.work-detail {
  width: 100%;

  padding-bottom: 72px;
}


/* ========================================
   FULL-BLEED HERO
======================================== */

.work-hero {
  width: 100%;

  background:
    var(--color-piedra);

  overflow: hidden;
}


.work-hero__image {
  width: 100%;

  height:
    clamp(
      380px,
      44vw,
      650px
    );

  object-fit: cover;

  object-position: center;
}


/* ========================================
   BREADCRUMB
======================================== */

body.page-play-detail nav.breadcrumb {
  background: transparent;
  border-radius: 0;

  display: flex;

  align-items: center;

  gap: 7px;

  padding-top: 22px;

  margin-bottom: 28px;

  font-size: 12px;
}


body.page-play-detail nav.breadcrumb a {
  color:
    var(--color-ciruela);

  text-decoration: none;
}


body.page-play-detail nav.breadcrumb a:hover {
  text-decoration: underline;
}


body.page-play-detail nav.breadcrumb span {
  color:
    var(--color-oliva-grisaceo);
}


body.page-play-detail nav.breadcrumb span:last-child {
  color:
    var(--color-carbon);
}


/* ========================================
   INTRO
======================================== */

.work-intro {
  padding-bottom: 32px;
}


.work-title {
  max-width: 850px;

  margin:
    0
    0
    30px;

  font-family:
    "Montaga",
    serif;

  font-size:
    clamp(
      48px,
      5vw,
      72px
    );

  line-height: 0.96;

  font-weight: 400;

  color:
    var(--color-ciruela);
}


/* ========================================
   INFO
======================================== */

.work-info {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    12px
    32px;

  max-width: 800px;
}


.work-info__row {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 13px;

  line-height: 1.45;
}


.work-info__row svg {
  flex: 0 0 auto;

  width: 16px;
  height: 16px;

  margin-top: 1px;

  color:
    var(--color-oliva-grisaceo);

  stroke-width: 1.7;
}


.work-info__row strong {
  margin-right: 4px;

  font-weight: 600;
}


.work-info__row a {
  color:
    var(--color-ciruela);

  text-decoration: none;
}


.work-info__row a:hover {
  text-decoration: underline;
}


/* ========================================
   TAGS
======================================== */

.work-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 22px;
}


.work-tags span,
.work-tags a {
  padding:
    5px
    9px;

  border:
    1px solid
    var(--color-oliva-grisaceo);

  border-radius: 99px;

  font-size: 11px;

  line-height: 1;

  text-decoration: none;

  color: var(--color-carbon);
}

.work-tags a:hover {
  background: var(--color-piedra);
  text-decoration: none;
}


/* ========================================
   ACTIONS
======================================== */

.work-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding:
    20px
    0;

  border-top:
    1px solid
    var(--color-oliva-grisaceo);

  border-bottom:
    1px solid
    var(--color-oliva-grisaceo);
}


.work-action {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 38px;

  padding:
    0
    13px;

  border:
    1px solid
    var(--color-oliva-grisaceo);

  border-radius: 6px;

  background:
    transparent;

  color:
    var(--color-carbon);

  font-size: 12px;

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}


.work-action svg {
  width: 15px;
  height: 15px;

  stroke-width: 1.7;
}


.work-action:hover {
  background:
    var(--color-piedra);
}


.work-action span {
  color:
    var(--color-oliva-grisaceo);
}


.work-action--primary {
  background:
    var(--color-ciruela);

  border-color:
    var(--color-ciruela);

  color:
    var(--color-marfil);
}


.work-action--primary span {
  color:
    var(--color-marfil);
}


.work-action--primary:hover {
  background:
    var(--color-carbon);

  border-color:
    var(--color-carbon);
}


.work-action--tickets {
  margin-left: auto;
}


/* ========================================
   SECTIONS
======================================== */

.content-section {
  padding:
    34px
    0;

  border-bottom:
    1px solid
    var(--color-oliva-grisaceo);
}


.content-title {
  margin: 0;

  font-family:
    "Montaga",
    serif;

  font-size: 30px;

  line-height: 1;

  font-weight: 400;

  color:
    var(--color-ciruela);
}


/* ========================================
   DATES
======================================== */

.date-list {
  margin-top: 18px;

  border-top:
    1px solid
    var(--color-piedra);
}


.date-row {
  display: grid;

  grid-template-columns:
    32px
    minmax(0, 1fr)
    20px;

  gap: 8px;

  align-items: center;

  min-height: 54px;

  padding:
    8px;

  border-bottom:
    1px solid
    var(--color-piedra);

  text-decoration: none;

  transition:
    background-color 150ms ease;
}


.date-row:hover {
  background:
    var(--color-piedra);
}


.date-row__icon {
  display: flex;

  align-items: center;
  justify-content: center;
}


.date-row__icon svg {
  width: 16px;
  height: 16px;

  color:
    var(--color-ciruela);

  stroke-width: 1.7;
}


.date-row__content {
  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap: 5px;

  font-size: 13px;
}


.date-row__content strong {
  font-weight: 600;
}


.date-row__content span {
  color:
    var(--color-oliva-grisaceo);
}


.date-row__arrow {
  width: 16px;
  height: 16px;

  color:
    var(--color-oliva-grisaceo);
}


/* ========================================
   DATE LINKS
======================================== */

.date-links {
  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 10px;
}


.date-links button {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding:
    4px
    0;

  border: 0;

  background:
    transparent;

  color:
    var(--color-carbon);

  font-size: 12px;

  cursor: pointer;
}


.date-links button:hover {
  color:
    var(--color-ciruela);
}


.date-links svg {
  width: 14px;
  height: 14px;
}


/* ========================================
   SYNOPSIS
======================================== */

.synopsis {
  padding:
    0;
}


.synopsis__toggle {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  padding:
    28px
    0;

  border: 0;

  background:
    transparent;

  cursor: pointer;
}


.synopsis__toggle svg {
  width: 20px;
  height: 20px;

  color:
    var(--color-ciruela);

  stroke-width: 1.7;

  transition:
    transform 180ms ease;
}


.synopsis__toggle[
  aria-expanded="true"
] svg {
  transform:
    rotate(180deg);
}


/* CLOSED BY DEFAULT */

.synopsis__content {
  display: none;

  max-width: 720px;

  padding-bottom: 30px;
}


.synopsis__content--open {
  display: block;
}


.synopsis__content p {
  margin:
    0
    0
    14px;

  font-size: 14px;

  line-height: 1.65;
}


.synopsis__extra {
  margin-top:
    24px !important;

  font-style: italic;
}


/* ========================================
   REVIEWS
======================================== */

.reviews-section {
  padding-top: 42px;
}


.reviews-section__header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}


.eyebrow {
  margin:
    0
    0
    6px;

  font-size: 11px;

  font-weight: 600;

  color:
    var(--color-oliva-grisaceo);
}


.reviews-section__header h2 {
  margin: 0;

  font-family:
    "Montaga",
    serif;

  font-size: 34px;

  font-weight: 400;

  color:
    var(--color-ciruela);
}


.reviews-count {
  font-size: 12px;

  color:
    var(--color-oliva-grisaceo);
}


.reviews-list {
  border-top:
    1px solid
    var(--color-oliva-grisaceo);
}


/* ========================================
   REVIEW
======================================== */

.review {
  position: relative;

  padding:
    22px
    0;

  border-bottom:
    1px solid
    var(--color-piedra);
}


.review__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}


.review__user {
  display: inline-block;

  margin-bottom: 6px;

  color:
    var(--color-ciruela);

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;
}


.review__user:hover {
  text-decoration: underline;
}


.review time {
  font-size: 11px;

  color:
    var(--color-oliva-grisaceo);
}


/* ========================================
   STARS
======================================== */

.review__stars {
  display: flex;

  gap: 1px;
}


.review__stars svg {
  width: 16px;
  height: 16px;

  fill:
    var(--color-ciruela);

  color:
    var(--color-ciruela);

  stroke-width: 1.4;
}


.review__stars .star-empty {
  fill:
    transparent;

  color:
    var(--color-oliva-grisaceo);
}


/* ========================================
   REVIEW TEXT
======================================== */

.review__text {
  max-width: 720px;

  margin:
    14px
    0
    0;

  font-size: 13px;

  line-height: 1.55;
}


.review__empty {
  margin:
    14px
    0
    0;

  font-size: 12px;

  font-style: italic;

  color:
    var(--color-oliva-grisaceo);
}


/* ========================================
   LIKE
======================================== */

.review__like {
  position: absolute;

  right: 0;
  bottom: 20px;

  display: flex;

  align-items: center;

  gap: 4px;

  padding:
    5px
    7px;

  border:
    1px solid
    var(--color-oliva-grisaceo);

  border-radius: 5px;

  background:
    transparent;

  color:
    var(--color-ciruela);

  font-size: 11px;

  cursor: pointer;
}


.review__like:hover {
  background:
    var(--color-piedra);
}


.review__like svg {
  width: 13px;
  height: 13px;
}


/* ========================================
   TABLET
======================================== */

@media (
  max-width: 1000px
) {

  .work-content {
    width: 82%;
  }


  .work-info {
    grid-template-columns:
      1fr;
  }


  .work-hero__image {
    height:
      clamp(
        320px,
        50vw,
        520px
      );
  }

}


/* ========================================
   MOBILE
======================================== */

@media (
  max-width: 768px
) {

  .page-container {
    width:
      min(
        100% - 32px,
        1440px
      );
  }


  .work-content {
    width: 100%;
  }


  .work-hero__image {
    height:
      clamp(
        280px,
        65vw,
        420px
      );
  }


  body.page-play-detail nav.breadcrumb {
  background: transparent;
  border-radius: 0;

    padding-top: 18px;

    margin-bottom: 22px;
  }


  .work-title {
    font-size: 44px;
  }


  .work-info {
    grid-template-columns:
      1fr;
  }


  .work-actions {
    display: grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .work-action--tickets {
    margin-left: 0;
  }


  .date-row__content {
    flex-direction: column;

    align-items: flex-start;

    gap: 2px;
  }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (
  max-width: 480px
) {

  .work-hero__image {
    height: 260px;
  }


  .work-actions {
    grid-template-columns:
      1fr;
  }


  .work-title {
    font-size: 39px;
  }


  .reviews-section__header {
    align-items: flex-start;

    flex-direction: column;

    gap: 8px;
  }

}


/* Disabled date toggles */
.date-links button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--color-oliva-grisaceo);
}

.date-links button:disabled:hover {
  color: var(--color-oliva-grisaceo);
}

.date-list--extra,
.date-list--past {
  display: none;
}

.date-list--extra.is-open,
.date-list--past.is-open {
  display: block;
}

.date-links button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.date-row {
  cursor: default;
}

.date-row:hover {
  background: transparent;
}

.review__own-actions {
  position: absolute;
  top: 22px;
  right: 0;
  display: flex;
  gap: 4px;
}

.review__own-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--color-oliva-grisaceo);
  cursor: pointer;
  line-height: 1;
}

.review__own-actions button:hover {
  color: var(--color-ciruela);
}

.review__own-actions svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.7;
}

.review--own .review__header {
  padding-right: 52px;
}

.work-add-to-list {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--color-oliva-grisaceo);
  border-radius: 6px;
  background: var(--color-marfil);
}

.work-add-to-list.is-open {
  display: block;
}

.work-hero--empty {
  min-height: clamp(280px, 44vw, 420px);
  background: var(--color-piedra);
}

.work-actions form {
  display: contents;
}

.leaving-soon-wrap {
  margin-bottom: 16px;
}

.work-staff-theater {
  margin-top: 8px;
  font-size: 12px;
}

.work-staff-theater summary {
  color: var(--color-ciruela);
  cursor: pointer;
}

.play-detail-stars .fa-star,
.play-detail-stars .fa-star-half-alt {
  color: var(--color-ciruela);
}