/* Build 566 REVIEW: approved larger mobile movie detail card. */
@media (max-width:760px) {
  .movie-wrap.details-open {
    margin:10px 0 14px;
    border-left:4px solid var(--detail-accent);
    border-bottom:0;
    border-radius:0 14px 14px 0;
    background:#fdf9f2;
    overflow:hidden;
  }

  /* The existing title button becomes the card header, preserving its tap and
     keyboard behavior while avoiding a duplicate title inside the card. */
  .movie-wrap.details-open > .movie {
    min-height:0;
    padding:16px 14px 7px;
    align-items:flex-start;
    font-size:clamp(23px,6.1vw,28px);
    line-height:1.13;
    font-weight:900;
  }
  .movie-wrap.details-open .movie-title-line { display:block; }
  .movie-wrap.details-open .dot,
  .movie-wrap.details-open .format-badge,
  .movie-wrap.details-open .location-line,
  .movie-wrap.details-open .info-chevron,
  .movie-wrap.details-open .detail-title { display:none; }

  .movie-wrap.details-open .details {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,48%);
    gap:14px 10px;
    align-items:start;
    max-height:none;
    margin:0;
    padding:10px 14px 18px;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .movie-wrap.details-open .detail-overview {
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  .movie-wrap.details-open .details-poster-wrap {
    grid-column:2;
    grid-row:1;
    margin:0;
    align-self:start;
  }
  .movie-wrap.details-open .details-poster-frame {
    width:100%;
    max-width:220px;
    border-radius:12px;
    box-shadow:0 4px 14px rgba(66,45,27,.14);
  }
  .movie-wrap.details-open .detail-secondary {
    grid-column:1 / -1;
    grid-row:2;
    min-width:0;
    border-top:1px solid #dfd3c3;
    padding-top:12px;
  }
  .movie-wrap.details-open .detail-location {
    gap:7px;
    margin:0 0 11px;
    padding:9px 8px;
    border-radius:10px;
  }
  .movie-wrap.details-open .detail-location-label {
    margin-bottom:4px;
    font-size:10px;
    line-height:1.15;
    letter-spacing:.075em;
  }
  .movie-wrap.details-open .detail-location-value {
    font-size:13px;
    line-height:1.25;
  }
  .movie-wrap.details-open .detail-line {
    margin:6px 0;
    font-size:16px;
    line-height:1.42;
  }
  .movie-wrap.details-open .detail-format {
    margin-top:8px;
    padding-top:7px;
  }
  .movie-wrap.details-open .shortlist-save {
    min-height:44px;
    margin:14px 0 2px;
    padding:9px 11px;
    font-size:12px;
    line-height:1.2;
    text-align:center;
  }
}

@media (max-width:360px) {
  .movie-wrap.details-open > .movie { padding:14px 11px 6px; }
  .movie-wrap.details-open .details { gap:11px 8px; padding:9px 11px 15px; }
  .movie-wrap.details-open .detail-location { padding:7px 6px; }
  .movie-wrap.details-open .detail-location-value { font-size:12px; }
  .movie-wrap.details-open .detail-line { font-size:14px; }
  .movie-wrap.details-open .shortlist-save { padding:8px 6px; font-size:11px; }
}

/* At the narrowest phone widths, keep the larger text readable rather than
   squeezing it into two small columns. */
@media (max-width:340px) {
  .movie-wrap.details-open .details { grid-template-columns:minmax(0,1fr); }
  .movie-wrap.details-open .detail-overview { grid-column:1; grid-row:1; }
  .movie-wrap.details-open .details-poster-wrap {
    grid-column:1;
    grid-row:2;
    width:100%;
    justify-self:center;
  }
  .movie-wrap.details-open .details-poster-frame { width:min(100%,210px); }
  .movie-wrap.details-open .detail-secondary { grid-column:1; grid-row:3; }
  .movie-wrap.details-open .detail-location-value { font-size:14px; }
  .movie-wrap.details-open .detail-line { font-size:15px; }
  .movie-wrap.details-open .shortlist-save { font-size:12px; }
}