/* =========================================================
   VAHID — VIDEOS ROOM
   ========================================================= */

.videos-page {
  width: 100%;
}

.videos-room {
  width: min(92%, 82rem);
  margin-inline: auto;

  padding:
    clamp(2.2rem, 5vw, 4.5rem)
    0
    clamp(3rem, 6vw, 5rem);
}

.videos-heading {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.videos-kicker {
  margin: 0 0 .35rem;

  font-size: clamp(.72rem, .9vw, .88rem);
  letter-spacing: .08em;
  opacity: .58;
}

.videos-heading h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 500;
}


/* 3 columns × 4 rows = 12 per page */

.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap:
    clamp(1.1rem, 2vw, 1.8rem)
    clamp(1rem, 1.7vw, 1.55rem);
}

.video-card {
  min-width: 0;
}

.video-card-button {
  display: block;
  width: 100%;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  color: inherit;
  text-align: inherit;

  cursor: pointer;
}

.video-thumbnail {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;
  border-radius: clamp(.65rem, 1vw, .9rem);

  background: rgba(0, 0, 0, .06);

  box-shadow:
    0 .35rem 1.15rem rgba(32, 27, 21, .09);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.video-thumbnail img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.005);
  transition: transform .35s ease;
}

.video-play-mark {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: grid;
  place-items: center;

  width: clamp(2.5rem, 3.6vw, 3.35rem);
  aspect-ratio: 1;

  border-radius: 50%;

  background: rgba(255, 255, 255, .9);
  color: #2c2925;

  font-size: clamp(.8rem, 1vw, 1rem);

  box-shadow:
    0 .25rem .9rem rgba(0, 0, 0, .18);

  transition:
    transform .2s ease,
    background .2s ease;
}

.video-card-button:hover .video-thumbnail {
  transform: translateY(-.15rem);

  box-shadow:
    0 .55rem 1.5rem rgba(32, 27, 21, .14);
}

.video-card-button:hover .video-thumbnail img {
  transform: scale(1.035);
}

.video-card-button:hover .video-play-mark {
  transform:
    translate(-50%, -50%)
    scale(1.07);

  background: #fff;
}

.video-title {
  margin:
    clamp(.55rem, .8vw, .72rem)
    .15rem
    0;

  font-size: clamp(.8rem, 1vw, .96rem);
  font-weight: 500;
  line-height: 1.45;

  text-align: center;

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


/* Pagination */

.videos-pagination {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(.65rem, 1.2vw, 1rem);

  margin-top: clamp(2rem, 4vw, 3.2rem);
}

.videos-page-button {
  display: grid;
  place-items: center;

  width: clamp(2rem, 2.7vw, 2.45rem);
  aspect-ratio: 1;

  padding: 0;

  border: 1px solid rgba(74, 62, 45, .2);
  border-radius: 50%;

  background: rgba(255, 255, 255, .48);
  color: inherit;

  font-size: clamp(1rem, 1.3vw, 1.25rem);

  cursor: pointer;
}

.videos-page-button:disabled {
  opacity: .28;
  cursor: default;
}

.videos-page-status {
  min-width: 3.4rem;
  text-align: center;

  font-size: clamp(.72rem, .85vw, .84rem);
  opacity: .65;
}


/* Modal */

.videos-modal[hidden] {
  display: none !important;
}

.videos-modal {
  position: fixed;
  inset: 0;

  z-index: 20000;

  display: grid;
  place-items: center;

  padding: clamp(1rem, 3vw, 2.5rem);
}

.videos-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(15, 14, 13, .78);
  backdrop-filter: blur(.25rem);
}

.videos-modal-card {
  position: relative;
  z-index: 1;

  width: min(92vw, 62rem);

  padding:
    clamp(.65rem, 1vw, .9rem)
    clamp(.65rem, 1vw, .9rem)
    clamp(.9rem, 1.4vw, 1.2rem);

  border-radius: clamp(.8rem, 1.2vw, 1.1rem);

  background: #f7f1e7;

  box-shadow:
    0 1.2rem 4rem rgba(0, 0, 0, .32);
}

.videos-modal-player {
  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;
  border-radius: clamp(.55rem, .8vw, .75rem);

  background: #000;
}

.videos-modal-player iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}

.videos-modal-close {
  position: absolute;

  right: -.65rem;
  top: -.65rem;

  z-index: 2;

  display: grid;
  place-items: center;

  width: 2rem;
  aspect-ratio: 1;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #fff;
  color: #292623;

  font-size: 1.25rem;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 .2rem .8rem rgba(0, 0, 0, .2);
}

.videos-modal-title {
  margin: clamp(.65rem, 1vw, .9rem) .3rem 0;

  font-size: clamp(.9rem, 1.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.4;

  text-align: center;
}


/* Tablet */

@media (max-width: 900px) {

  .videos-room {
    width: min(94%, 52rem);
  }

  .videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Mobile */

@media (max-width: 560px) {

  .videos-room {
    width: 92%;
  }

  .videos-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .video-title {
    font-size: .84rem;
  }
}


/* =========================================================
   VIDEOS — TITLE VISIBILITY / SONGS VISUAL LANGUAGE
   ========================================================= */

.videos-heading h1 {
  color: #263b42 !important;
  opacity: 1 !important;
}

.videos-kicker {
  color: #263b42 !important;
  opacity: .58 !important;
}

.video-title {
  color: #263b42 !important;
  opacity: 1 !important;

  font-weight: 500 !important;

  margin-top:
    clamp(.62rem, .9vw, .78rem) !important;
}

html[lang="fa"] .video-title {
  direction: rtl;
}

html[lang="tr"] .video-title,
html[lang="en"] .video-title {
  direction: ltr;
}


/* Match Songs page visual clarity */

.video-card-button {
  color: #263b42 !important;
}

.video-card-button:visited,
.video-card-button:hover,
.video-card-button:active {
  color: #263b42 !important;
}

/* ===== END VIDEOS TITLE VISIBILITY ===== */


/* ===== VIDEOS PAGINATION — HIGH VISIBILITY ===== */

.videos-page-button {
  border: 1px solid #53666d !important;
  background: #ffffff !important;
  color: #263b42 !important;
  opacity: 1 !important;

  box-shadow:
    0 .18rem .55rem rgba(38, 59, 66, .12);
}

.videos-page-button:not(:disabled):hover {
  background: #263b42 !important;
  color: #ffffff !important;
}

.videos-page-button:disabled {
  border-color: rgba(38, 59, 66, .25) !important;
  background: rgba(255, 255, 255, .55) !important;
  color: rgba(38, 59, 66, .35) !important;
  opacity: 1 !important;
}

.videos-page-status {
  color: #263b42 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* ===== END PAGINATION VISIBILITY ===== */