/* =========================
   Desktop
   ========================= */

@media (min-width: 901px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 46px;
  }

  .schedule-layout,
  .order-layout {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .event {
    grid-template-columns: 170px 1fr auto;
    gap: 18px;
  }

  .date .time {
    white-space: nowrap;
  }

  .two {
    grid-template-columns: 1fr 1fr;
  }

  .about {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .offline {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .chronicles-rail,
  .gallery-rail {
    gap: 18px;
    padding-bottom: 10px;
  }

  .rail-card,
  .gallery-rail .photo {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: calc((100% - 36px) / 3);
  }

  .rail-card {
    min-height: 390px;
  }

  .gallery-rail .photo {
    min-height: 280px;
  }

  .rail-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(11, 11, 13, 0.78);
    color: var(--gold);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .rail-arrow:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .rail-arrow-left {
    left: -18px;
    transform: translateY(-50%);
  }

  .rail-arrow-right {
    right: -18px;
    transform: translateY(-50%);
  }

  .rail-arrow-left:hover {
    transform: translateY(-50%) translateX(-2px);
  }

  .rail-arrow-right:hover {
    transform: translateY(-50%) translateX(2px);
  }
}


/* =========================
   Desktop rail overlay controls
   ========================= */

@media (min-width: 901px) {
  .rail-wrap {
    position: relative;
  }

  .rail-wrap::before,
  .rail-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 10px;
    z-index: 3;
    width: 96px;
    pointer-events: none;
    opacity: 0.82;
    transition: opacity 0.2s ease;
  }

  .rail-wrap::before {
    left: 0;
    background: linear-gradient(90deg, rgba(11, 11, 13, 0.92), rgba(11, 11, 13, 0));
  }

  .rail-wrap::after {
    right: 0;
    background: linear-gradient(270deg, rgba(11, 11, 13, 0.92), rgba(11, 11, 13, 0));
  }

  .rail-wrap:hover::before,
  .rail-wrap:hover::after {
    opacity: 1;
  }

  .rail-arrow {
    top: 0 !important;
    bottom: 10px !important;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(241, 234, 220, 0.82);
    font-size: 72px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: none;
    box-shadow: none;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.75);
    opacity: 0.58;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .rail-arrow:hover {
    background: transparent;
    color: var(--gold);
    opacity: 1;
  }

  .rail-arrow-left {
    left: 0 !important;
    transform: none !important;
  }

  .rail-arrow-right {
    right: 0 !important;
    transform: none !important;
  }

  .rail-arrow-left:hover {
    transform: translateX(-3px) !important;
  }

  .rail-arrow-right:hover {
    transform: translateX(3px) !important;
  }
}