/*
 * About page only (loaded by about.php).
 *
 * MOBILE REVAMP (2026-10-08): phones only (below 768px). Content unchanged;
 * tablet and desktop unaffected.
 *  - the 4 stat cards (12+ / 40+ / 2,500+ / 5.0) become a 2 x 2 grid
 *  - "Perks of Choosing Us": centred heading, experience box and photo side
 *    by side, and the 4 club cards as a 2 x 2 grid
 * To revert: delete this file and set $pageCss in about.php back to
 * 'assets/css/pages/decor.css' (or restore about.php from
 * ~/Downloads/cherrywood-backup-2026-10-08-before-about-mobile/).
 */
@media (max-width: 767px) {

  /* ---------- Stat cards: 2 x 2 grid ---------- */
  .vs-about--section .row.g-4 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
  }
  .vs-about--section .row.g-4 > .col-sm-6 {
    width: 50%;
  }
  .vs-about--section .stat-counter-card {
    padding: 18px 8px;
    border-radius: 14px;
  }
  .vs-about--section .stat-counter-card__icon {
    margin-bottom: 8px;
  }
  .vs-about--section .stat-counter-card__icon img {
    width: 40px;
    height: 40px;
  }
  .vs-about--section .stat-counter-card__number {
    font-size: 27px;
    margin-bottom: 2px;
  }
  .vs-about--section .stat-counter-card__label {
    font-size: 13px;
    line-height: 1.35;
  }
  /* room under the cards so the palm-tree decoration (bottom right of the
     section) sits below them instead of over the "Google Rating" card */
  .vs-about--section .row.pt-30 > .col-lg-6:last-child {
    margin-bottom: 95px !important;
  }

  /* ---------- Perks of Choosing Us: heading ---------- */
  .vs-room--area .vs-title {
    text-align: center;
  }
  .vs-room--area .row.align-items-center > [class*="col-lg"] {
    margin-bottom: 24px;
  }

  /* ---------- Experience box + photo, side by side ---------- */
  .vs-room--area .vs-room--video {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    min-height: 170px;
    background-position: 70% center;
  }
  .vs-room--area .vs-room--ex {
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 6px;
    border-width: 2px;
    box-shadow: 0 0 0 5px var(--vs-white-color);
  }
  .vs-room--area .vs-room--ex__num {
    font-size: 38px;
    margin-bottom: 6px;
  }
  .vs-room--area .vs-room--ex__title {
    font-size: 14px;
    margin: 0 0 12px;
  }
  .vs-room--area .vs-room--ex img {
    width: 28px;
  }
  .vs-room--area .vs-room--icon {
    flex: 1 1 auto;
  }
  .vs-room--area .vs-room--play {
    --icon-size: 56px;
    border-width: 5px;
    font-size: 18px;
  }

  /* ---------- Club cards: 2 x 2 grid ---------- */
  .vs-room--area .row:not(.align-items-center) {
    margin-left: -6px;
    margin-right: -6px;
  }
  .vs-room--area .row:not(.align-items-center) > .col-lg-3 {
    display: flex;
    width: 50%;
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
  }
  .vs-room--area .vs-room {
    width: 100%;
    min-height: 205px; /* all four cards the same height */
    padding: 20px 10px;
    border-width: 2px;
    border-radius: 14px;
  }
  .vs-room--area .vs-room__icon {
    margin-bottom: 10px;
  }
  .vs-room--area .vs-room__icon img {
    height: 42px;
    width: auto;
  }
  .vs-room--area .vs-room__title {
    font-size: 17px;
    margin-bottom: 6px;
  }
  .vs-room--area .vs-room__text {
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* About video (), all screen sizes: the video fills the photo area to
   the right of the red "12+" card (inside .vs-room--icon), so its controls are never
   hidden behind the card. To revert: delete this block and put the play button back
   in about.php (see the backup). */
.vs-room--video .vs-room--ex {
  position: relative;
  z-index: 1;
}
.vs-room--video .vs-room--icon {
  position: relative;
  align-self: stretch;
}
.vs-room--video .cw-room-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}