/* DANANG2NITE / MOBILE STAGE 08 / PLACES LIST ONLY
   Mobile editorial card layout; PC, Places detail and other pages unaffected.
   Loaded AFTER the existing locale/Places styles (max-width: 820px).
*/
@media (max-width: 820px) {
  html body.page-places-list .index-hero::after {
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 1px;
    color: #a89c8c;
  }
  html body.page-places-list .index-hero .eyebrow {
    font-size: 11px;
    line-height: 1.4;
  }
  html body.page-places-list .index-hero p {
    font-size: 15px;
    line-height: 1.65;
    color: #c1b8b0;
  }
  html body.page-places-list .places-grid--index {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  html body.page-places-list .places-grid--index .place-card,
  html body.page-places-list .places-grid--index .place-card:first-child,
  html body.page-places-list .places-grid--index .place-card:not(:first-child) {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 100%;
    overflow: hidden;
    border-radius: 16px;
  }
  html body.page-places-list .places-grid--index .place-card__media,
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    background: #09090b;
    overflow: hidden;
  }
  html body.page-places-list .places-grid--index .place-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__media::after {
    background: linear-gradient(180deg, transparent 72%, rgba(0,0,0,.2));
  }
  html body.page-places-list .places-grid--index .place-card__body,
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__body {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    padding: 14px 15px 16px;
  }
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__body::before {
    top: 0;
    left: 15px;
  }
  html body.page-places-list .places-grid--index .ad-badge {
    font-size: 10px;
    line-height: 1.25;
    padding: 6px 9px;
  }
  html body.page-places-list .places-grid--index .place-category {
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .4px;
  }
  html body.page-places-list .places-grid--index .place-card h2,
  html body.page-places-list .places-grid--index .place-card h3,
  html body.page-places-list .places-grid--index .place-card:first-child h2,
  html body.page-places-list .places-grid--index .place-card:first-child h3 {
    display: block;
    -webkit-line-clamp: unset;
    max-width: 100%;
    margin-top: 8px;
    font-size: 22px;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-shadow: none;
  }
  html body.page-places-list .places-grid--index .place-card:first-child h2,
  html body.page-places-list .places-grid--index .place-card:first-child h3 {
    font-size: 25px;
  }
  html body.page-places-list .places-grid--index .place-card p,
  html body.page-places-list .places-grid--index .place-card:first-child p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-width: 100%;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: #c5bbb2;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
  }
  html body.page-places-list .places-grid--index .place-price,
  html body.page-places-list .places-grid--index .place-card:first-child .place-price {
    max-width: 100%;
    width: max-content;
    margin-top: 12px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
  html body.page-places-list .public-empty {
    font-size: 14px;
    line-height: 1.6;
    color: #c0b5ac;
  }
  html body.page-places-list .places-grid--index .place-card:focus-visible {
    outline: 2px solid #e4c77d;
    outline-offset: 2px;
  }
}
@media (max-width: 359px) {
  html body.page-places-list .places-grid--index .place-card__body,
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__body {
    padding: 12px 12px 14px;
  }
  html body.page-places-list .places-grid--index .place-card h2,
  html body.page-places-list .places-grid--index .place-card h3 {
    font-size: 21px;
  }
  html body.page-places-list .places-grid--index .place-card:first-child h2,
  html body.page-places-list .places-grid--index .place-card:first-child h3 {
    font-size: 23px;
  }
}

/* Scoped exception: legacy Phase master CSS applies font-size !important.
   Overrides only Places LIST typography; do not modify global master rules. */
@media (max-width: 820px) {
  html body.page-places-list .places-grid--index .place-card .place-card__body h2,
  html body.page-places-list .places-grid--index .place-card .place-card__body h3 {
    font-size: 22px !important;
    line-height: 1.23;
    display: block;
    max-height: none;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__body h2,
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__body h3 {
    font-size: 25px !important;
  }
  html body.page-places-list .places-grid--index .place-card .place-card__body p {
    font-size: 14px !important;
    line-height: 1.56;
    -webkit-line-clamp: 3;
  }
  html body.page-places-list .index-hero p {font-size: 15px;line-height: 1.65;}
}
@media (max-width: 359px) {
  html body.page-places-list .places-grid--index .place-card .place-card__body h2,
  html body.page-places-list .places-grid--index .place-card .place-card__body h3 {font-size: 21px !important;}
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__body h2,
  html body.page-places-list .places-grid--index .place-card:first-child .place-card__body h3 {font-size: 23px !important;}
}