/* =========================================================
   SIX NINE — PADEL
   File: assets/css/base/padel.css
   ========================================================= */


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

.padel-page {
  background:
    var(--color-black);

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

.padel-page main {
  position: relative;

  overflow: clip;
}


/* =========================================================
   HERO
   ========================================================= */

.padel-hero {
  position: relative;

  min-height: 100svh;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  background:
    var(--color-black);

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


/* =========================================================
   HERO MEDIA
   ========================================================= */

.padel-hero__media {
  position: absolute;

  inset: 0;

  overflow: hidden;

  background:
    var(--color-graphite);
}

.padel-hero__media img {
  position: absolute;

  inset:
    -5%
    0;

  width: 100%;
  height: 110%;

  object-fit: cover;
  object-position: center;

  display: block;
}

.padel-hero__overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(12, 12, 13, 0.1) 0%,
      rgba(12, 12, 13, 0.16) 30%,
      rgba(12, 12, 13, 0.54) 68%,
      rgba(12, 12, 13, 0.96) 100%
    );
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.padel-hero__container {
  position: relative;

  z-index: 2;

  width: 100%;
}

.padel-hero__content {
  display: grid;

  gap: 28px;

  width: 100%;

  padding:
    180px
    0
    138px;
}

.padel-hero__eyebrow {
  color:
    rgba(
      255,
      255,
      255,
      0.7
    );
}

.padel-hero__eyebrow::before {
  background:
    var(--color-padel);
}

.padel-hero__title {
  max-width: 1280px;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      5.8rem,
      11.5vw,
      11.5rem
    );

  font-weight: 500;

  line-height: 0.8;

  letter-spacing: -0.07em;
}

.padel-hero__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 60px;

  margin-top: 4px;
}


/* =========================================================
   HERO STATEMENT
   ========================================================= */

.padel-hero__statement {
  display: grid;

  gap: 6px;
}

.padel-hero__statement p {
  font-family:
    var(--font-display);

  font-size:
    clamp(
      1.9rem,
      3vw,
      3rem
    );

  font-weight: 500;

  line-height: 1;

  letter-spacing: -0.035em;
}

.padel-hero__statement span {
  color:
    rgba(
      255,
      255,
      255,
      0.55
    );

  font-size: 0.72rem;

  letter-spacing: 0.04em;
}

.padel-hero__actions {
  display: flex;
  align-items: center;

  gap: 8px;
}


/* =========================================================
   HERO META
   ========================================================= */

.padel-hero__meta {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 3;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  background:
    rgba(
      12,
      12,
      13,
      0.46
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.padel-hero__meta-grid {
  display: grid;

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

.padel-hero__meta-grid > div {
  display: grid;

  gap: 3px;

  min-height: 78px;

  align-content: center;

  padding:
    14px
    22px;

  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );
}

.padel-hero__meta-grid > div:first-child {
  padding-left: 0;
}

.padel-hero__meta-grid > div:last-child {
  border-right: 0;
}

.padel-hero__meta-grid strong {
  color:
    var(--color-padel);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.15em;
}

.padel-hero__meta-grid span {
  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  font-size: 0.68rem;

  letter-spacing: 0.04em;
}


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

.padel-intro {
  padding:
    clamp(
      110px,
      15vw,
      200px
    )
    0;

  background:
    var(--color-ivory);

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

.padel-intro__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.7fr);

  gap:
    clamp(
      70px,
      10vw,
      150px
    );

  align-items: end;
}

.padel-intro__copy {
  display: grid;

  gap: 22px;
}

.padel-intro__description {
  display: grid;

  gap: 30px;

  max-width: 520px;
}


/* =========================================================
   COURTS
   ========================================================= */

.padel-courts {
  padding:
    clamp(
      110px,
      14vw,
      190px
    )
    0
    clamp(
      120px,
      17vw,
      220px
    );

  background:
    var(--color-black);

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

.padel-courts__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.4fr);

  gap:
    clamp(
      50px,
      8vw,
      120px
    );

  align-items: end;

  margin-bottom:
    clamp(
      60px,
      8vw,
      100px
    );
}

.padel-courts__header > div {
  display: grid;

  gap: 20px;
}

.padel-courts__header > p {
  max-width: 430px;

  color:
    rgba(
      255,
      255,
      255,
      0.55
    );
}


/* =========================================================
   COURT GALLERY
   ========================================================= */

.padel-courts__gallery {
  display: grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(280px, 0.72fr);

  grid-template-rows:
    minmax(340px, 0.86fr)
    minmax(250px, 0.58fr);

  gap: 10px;
}

.padel-court-media {
  position: relative;

  margin: 0;

  overflow: hidden;

  background:
    var(--color-graphite);
}

.padel-court-media--hero {
  grid-row:
    1
    / 3;

  min-height: 780px;
}

.padel-court-media--portrait {
  min-height: 430px;
}

.padel-court-media--wide {
  min-height: 330px;
}

.padel-court-media img {
  width: 100%;
  height: 100%;

  min-height: inherit;

  object-fit: cover;
  object-position: center;

  transition:
    transform
    1000ms
    var(--ease-premium);
}

.padel-court-media::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(12, 12, 13, 0.68) 100%
    );
}

.padel-court-media figcaption {
  position: absolute;

  left: 26px;
  right: 26px;
  bottom: 24px;

  z-index: 2;

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

  gap: 24px;
}

.padel-court-media figcaption span {
  color:
    var(--color-padel);

  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.14em;
}

.padel-court-media figcaption strong {
  max-width: 280px;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      1.8rem,
      3vw,
      3rem
    );

  font-weight: 500;

  line-height: 0.95;

  letter-spacing: -0.035em;

  text-align: right;
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.padel-experience {
  padding:
    clamp(
      110px,
      14vw,
      185px
    )
    0;

  background:
    var(--color-white);

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

.padel-experience__top {
  display: grid;

  gap: 22px;

  max-width: 830px;

  margin-bottom:
    clamp(
      58px,
      8vw,
      90px
    );
}

.padel-experience__grid {
  display: grid;

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

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


/* =========================================================
   EXPERIENCE ITEM
   ========================================================= */

.padel-experience-item {
  display: grid;

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

  gap: 20px;

  min-height: 280px;

  padding:
    28px
    28px
    28px
    0;

  border-right:
    1px solid
    var(--border-light);

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

.padel-experience-item:last-child {
  border-right: 0;
}

.padel-experience-item__number {
  color:
    var(--color-padel);

  font-size: 0.6rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.padel-experience-item > div {
  display: grid;

  align-content: end;

  gap: 14px;
}

.padel-experience-item strong {
  font-family:
    var(--font-display);

  font-size:
    clamp(
      2rem,
      3.2vw,
      3.4rem
    );

  font-weight: 500;

  line-height: 0.98;

  letter-spacing: -0.04em;
}

.padel-experience-item p {
  max-width: 330px;

  color:
    var(--text-secondary);

  font-size: 0.78rem;

  line-height: 1.7;
}


/* =========================================================
   RATE
   ========================================================= */

.padel-rate {
  padding:
    clamp(
      110px,
      15vw,
      200px
    )
    0;

  background:
    var(--color-ivory);

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

.padel-rate__layout {
  display: grid;

  grid-template-columns:
    minmax(180px, 0.32fr)
    minmax(0, 1.68fr);

  gap:
    clamp(
      60px,
      9vw,
      130px
    );

  align-items: start;
}

.padel-rate__content {
  display: grid;

  gap: 22px;

  max-width: 900px;
}

.padel-rate__from {
  color:
    var(--text-muted);

  font-size: 0.68rem;
  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.padel-rate__price {
  display: flex;
  align-items: flex-end;

  gap: 16px;
}

.padel-rate__price strong {
  font-family:
    var(--font-display);

  font-size:
    clamp(
      5rem,
      10vw,
      10rem
    );

  font-weight: 500;

  line-height: 0.8;

  letter-spacing: -0.07em;
}

.padel-rate__price span {
  margin-bottom: 11px;

  color:
    var(--color-padel);

  font-size: 0.78rem;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.padel-rate__content > p {
  max-width: 580px;

  color:
    var(--text-secondary);

  font-size: 0.85rem;

  line-height: 1.75;
}

.padel-rate__actions {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 8px;
}


/* =========================================================
   FACILITIES
   ========================================================= */

.padel-facilities {
  padding:
    clamp(
      110px,
      14vw,
      190px
    )
    0;

  background:
    var(--color-black);

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

.padel-facilities__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(360px, 0.88fr);

  gap:
    clamp(
      50px,
      8vw,
      120px
    );

  align-items: stretch;
}


/* =========================================================
   FACILITIES VISUAL
   ========================================================= */

.padel-facilities__visual {
  position: relative;

  min-height: 820px;

  margin: 0;

  overflow: hidden;

  background:
    var(--color-graphite);
}

.padel-facilities__visual img {
  width: 100%;
  height: 110%;

  object-fit: cover;
  object-position: center;

  transform:
    translateY(-5%);
}


/* =========================================================
   FACILITIES CONTENT
   ========================================================= */

.padel-facilities__content {
  display: grid;

  align-content: start;

  gap:
    clamp(
      52px,
      8vw,
      90px
    );

  padding-top: 12px;
}

.padel-facilities__heading {
  display: grid;

  gap: 20px;
}

.padel-facilities__list {
  display: grid;

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

.padel-facility {
  display: grid;

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

  gap: 18px;

  align-items: center;

  min-height: 76px;

  border-bottom:
    1px solid
    var(--border-dark-soft);
}

.padel-facility span {
  color:
    rgba(
      255,
      255,
      255,
      0.36
    );

  font-size: 0.56rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.padel-facility strong {
  font-family:
    var(--font-display);

  font-size:
    clamp(
      1.45rem,
      2.1vw,
      2rem
    );

  font-weight: 500;

  line-height: 1;

  letter-spacing: -0.025em;
}


/* =========================================================
   GALLERY
   ========================================================= */

.padel-gallery {
  padding:
    clamp(
      110px,
      14vw,
      190px
    )
    0;

  background:
    var(--color-graphite);

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

.padel-gallery__header {
  display: grid;

  gap: 20px;

  max-width: 820px;

  margin-bottom:
    clamp(
      56px,
      8vw,
      90px
    );
}


/* =========================================================
   DYNAMIC GALLERY
   ========================================================= */

.padel-gallery__grid {
  display: grid;

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

  grid-auto-rows: 90px;

  gap: 8px;
}

.padel-gallery-item {
  position: relative;

  grid-column:
    span 4;

  grid-row:
    span 5;

  margin: 0;

  overflow: hidden;

  background:
    var(--color-black);
}

.padel-gallery-item--wide {
  grid-column:
    span 8;

  grid-row:
    span 5;
}

.padel-gallery-item--portrait {
  grid-column:
    span 4;

  grid-row:
    span 7;
}

.padel-gallery-item--landscape {
  grid-column:
    span 6;

  grid-row:
    span 4;
}

.padel-gallery-item--large {
  grid-column:
    span 8;

  grid-row:
    span 7;
}

.padel-gallery-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform
    900ms
    var(--ease-premium);
}

.padel-gallery-item::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 65%,
      rgba(12, 12, 13, 0.28) 100%
    );
}


/* =========================================================
   BOOKING SECTION
   ========================================================= */

.padel-booking {
  padding:
    clamp(
      110px,
      15vw,
      200px
    )
    0;

  background:
    var(--color-ivory);

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

.padel-booking__header {
  display: grid;

  gap: 22px;

  max-width: 780px;

  margin-bottom:
    clamp(
      52px,
      8vw,
      86px
    );
}

.padel-booking__methods {
  display: grid;

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

  gap: 1px;

  background:
    var(--border-light);

  border:
    1px solid
    var(--border-light);
}


/* =========================================================
   BOOKING CARD
   ========================================================= */

.padel-booking-card {
  position: relative;

  display: grid;

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

  gap: 22px;

  align-items: end;

  min-height: 430px;

  padding: 30px;

  overflow: hidden;

  background:
    var(--color-ivory);

  color:
    var(--color-black);

  text-align: left;

  transition:
    background-color
      var(--duration-normal)
      var(--ease-premium),
    color
      var(--duration-normal)
      var(--ease-premium);
}

.padel-booking-card::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -330px;
  bottom: -350px;

  border-radius: 50%;

  pointer-events: none;

  opacity: 0.7;

  transform:
    scale(0.8);

  transition:
    transform
      900ms
      var(--ease-premium);
}

.padel-booking-card--direct::after {
  background:
    radial-gradient(
      circle,
      rgba(255, 46, 138, 0.28),
      transparent 68%
    );
}

.padel-booking-card--ayo::after {
  background:
    radial-gradient(
      circle,
      rgba(185, 154, 91, 0.27),
      transparent 68%
    );
}

.padel-booking-card__number {
  position: relative;

  z-index: 2;

  align-self: start;

  color:
    var(--text-muted);

  font-size: 0.6rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.padel-booking-card__content {
  position: relative;

  z-index: 2;

  display: grid;

  gap: 14px;
}

.padel-booking-card__content strong {
  font-family:
    var(--font-display);

  font-size:
    clamp(
      2.7rem,
      5vw,
      5rem
    );

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.05em;
}

.padel-booking-card__content p {
  max-width: 390px;

  color:
    var(--text-secondary);

  font-size: 0.78rem;

  line-height: 1.7;

  transition:
    color
    var(--duration-normal)
    var(--ease-premium);
}

.padel-booking-card__meta {
  color:
    var(--text-muted);

  font-size: 0.59rem;
  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition:
    color
    var(--duration-normal)
    var(--ease-premium);
}

.padel-booking-card__arrow {
  position: relative;

  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border:
    1px solid
    var(--border-light);

  border-radius: 50%;

  transition:
    transform
      var(--duration-normal)
      var(--ease-premium),
    background-color
      var(--duration-normal)
      var(--ease-premium),
    color
      var(--duration-normal)
      var(--ease-premium),
    border-color
      var(--duration-normal)
      var(--ease-premium);
}

.padel-booking-card__arrow svg {
  width: 18px;
  height: 18px;
}


/* =========================================================
   BEYOND PADEL
   ========================================================= */

.padel-beyond {
  padding:
    clamp(
      110px,
      14vw,
      190px
    )
    0;

  background:
    var(--color-white);

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

.padel-beyond__header {
  display: grid;

  gap: 20px;

  max-width: 800px;

  margin-bottom:
    clamp(
      52px,
      8vw,
      86px
    );
}

.padel-beyond__grid {
  display: grid;

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

  gap: 10px;
}


/* =========================================================
   BEYOND CARD
   ========================================================= */

.padel-beyond-card {
  position: relative;

  min-height: 660px;

  overflow: hidden;

  color:
    var(--color-white);

  background:
    var(--color-graphite);
}

.padel-beyond-card__media {
  position: absolute;

  inset: 0;

  overflow: hidden;
}

.padel-beyond-card__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform
    1000ms
    var(--ease-premium);
}

.padel-beyond-card__overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(12, 12, 13, 0.08) 20%,
      rgba(12, 12, 13, 0.82) 100%
    );
}

.padel-beyond-card__content {
  position: absolute;

  left: 30px;
  right: 80px;
  bottom: 30px;

  z-index: 2;

  display: grid;

  gap: 14px;
}

.padel-beyond-card__content strong {
  font-family:
    var(--font-display);

  font-size:
    clamp(
      2.8rem,
      5vw,
      5.2rem
    );

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.05em;
}

.padel-beyond-card__content p {
  max-width: 380px;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  font-size: 0.78rem;

  line-height: 1.7;
}

.padel-beyond-card__arrow {
  position: absolute;

  right: 28px;
  bottom: 30px;

  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.3
    );

  border-radius: 50%;

  transition:
    transform
      var(--duration-normal)
      var(--ease-premium),
    background-color
      var(--duration-normal)
      var(--ease-premium);
}

.padel-beyond-card__arrow svg {
  width: 19px;
  height: 19px;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.padel-final {
  position: relative;

  padding:
    clamp(
      140px,
      18vw,
      260px
    )
    0;

  overflow: hidden;

  background:
    var(--color-black);

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

.padel-final::before {
  content: "";

  position: absolute;

  width: 1000px;
  height: 1000px;

  left: 50%;
  bottom: -820px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 46, 138, 0.3),
      transparent 68%
    );

  pointer-events: none;
}

.padel-final__inner {
  position: relative;

  z-index: 2;

  display: grid;

  justify-items: center;

  gap: 28px;

  text-align: center;
}

.padel-final__inner > p {
  max-width: 440px;

  color:
    rgba(
      255,
      255,
      255,
      0.56
    );
}

.padel-final__actions {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 4px;
}


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

.padel-mobile-cta {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 90;

  display: none;

  grid-template-columns:
    1.35fr
    0.65fr;

  gap: 7px;

  padding:
    9px
    12px
    calc(
      9px +
      env(
        safe-area-inset-bottom
      )
    );

  border-top:
    1px solid
    var(--border-light);

  background:
    rgba(
      242,
      238,
      229,
      0.96
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.padel-mobile-cta .btn {
  width: 100%;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  padding:
    78px
    0
    24px;

  background:
    var(--color-black);

  color:
    var(--color-white);

  border-top:
    1px solid
    var(--border-dark-soft);
}

.site-footer__top {
  display: grid;

  grid-template-columns:
    0.72fr
    1.28fr;

  gap: 80px;

  padding-bottom: 68px;
}

.site-footer__brand {
  display: grid;

  align-content: start;

  gap: 20px;
}

.site-footer__wordmark {
  width: fit-content;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      3rem,
      5.8vw,
      5.8rem
    );

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.055em;
}

.site-footer__brand p {
  color:
    var(--text-light-muted);

  font-size: 0.85rem;

  line-height: 1.7;
}

.site-footer__nav {
  display: grid;

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

  gap: 32px;
}

.site-footer__column {
  display: grid;

  align-content: start;

  gap: 11px;
}

.site-footer__label {
  margin-bottom: 9px;

  color:
    var(--color-gold);

  font-size: 0.61rem;
  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.site-footer__column a,
.site-footer__column button {
  width: fit-content;

  color:
    rgba(
      255,
      255,
      255,
      0.58
    );

  font-size: 0.78rem;

  transition:
    color
    var(--duration-fast)
    ease;
}

.site-footer__column a:hover,
.site-footer__column button:hover {
  color:
    var(--color-white);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding-top: 21px;

  border-top:
    1px solid
    var(--border-dark-soft);

  color:
    rgba(
      255,
      255,
      255,
      0.38
    );

  font-size: 0.64rem;

  letter-spacing: 0.055em;
}


/* =========================================================
   IMAGE SAFETY
   ========================================================= */

.padel-page img:not([src]),
.padel-page img[src=""] {
  visibility: hidden;
}

.padel-hero__media,
.padel-court-media,
.padel-facilities__visual,
.padel-gallery-item,
.padel-beyond-card__media {
  background-color:
    var(--color-graphite);
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {
  .padel-court-media:hover img,
  .padel-gallery-item:hover img,
  .padel-beyond-card:hover
  .padel-beyond-card__media img {
    transform:
      scale(1.035);
  }

  .padel-booking-card:hover {
    background:
      var(--color-black);

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

  .padel-booking-card:hover::after {
    transform:
      scale(1.35);
  }

  .padel-booking-card:hover
  .padel-booking-card__content p {
    color:
      rgba(
        255,
        255,
        255,
        0.58
      );
  }

  .padel-booking-card:hover
  .padel-booking-card__meta {
    color:
      rgba(
        255,
        255,
        255,
        0.42
      );
  }

  .padel-booking-card:hover
  .padel-booking-card__number {
    color:
      rgba(
        255,
        255,
        255,
        0.4
      );
  }

  .padel-booking-card:hover
  .padel-booking-card__arrow {
    border-color:
      var(--color-white);

    background:
      var(--color-white);

    color:
      var(--color-black);

    transform:
      translate(
        3px,
        -3px
      );
  }

  .padel-beyond-card:hover
  .padel-beyond-card__arrow {
    background:
      var(--color-white);

    color:
      var(--color-black);

    transform:
      translateX(4px);
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {
  .padel-court-media img,
  .padel-gallery-item img,
  .padel-beyond-card__media img {
    transform:
      none !important;
  }

  .padel-booking-card:hover {
    background:
      var(--color-ivory);

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

  .padel-booking-card:hover::after {
    transform:
      scale(0.8);
  }

  .padel-booking-card:hover
  .padel-booking-card__content p {
    color:
      var(--text-secondary);
  }

  .padel-booking-card:hover
  .padel-booking-card__meta {
    color:
      var(--text-muted);
  }

  .padel-booking-card:hover
  .padel-booking-card__arrow {
    background:
      transparent;

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

    color:
      var(--color-black);

    transform:
      none;
  }

  .padel-beyond-card:hover
  .padel-beyond-card__arrow {
    background:
      transparent;

    color:
      var(--color-white);

    transform:
      none;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .padel-court-media img,
  .padel-gallery-item img,
  .padel-booking-card,
  .padel-booking-card::after,
  .padel-booking-card__arrow,
  .padel-beyond-card__media img,
  .padel-beyond-card__arrow {
    transition:
      none !important;
  }
}