/* Scientific Research page — gate-sr-* */
.gate-sr-page {
  --gate-sr-bg: #f3efdf;
  --gate-sr-ink: #0b1220;
  --gate-sr-muted: #4a5568;
  --gate-sr-gap: clamp(10px, 1.2vw, 14px);
  --gate-sr-grid-h: clamp(420px, 52vw, 520px);
  background: var(--gate-sr-bg);
  color: var(--gate-sr-ink);
  padding-top: calc(var(--gate-hero-header-offset, 148px) + clamp(1rem, 3vw, 1.75rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.gate-sr-wrap {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.gate-sr-hero {
  padding: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
}

.gate-sr-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin: 0 0 1rem;
  line-height: 1.2;
}

.gate-sr-hero__desc {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  line-height: 1.9;
  color: var(--gate-sr-muted);
}

/* Header — beige surface + drop shadow (like reference) */
body.gate-sr-active {
  background: var(--gate-sr-bg);
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-site-header__logos-strip,
body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-site-header__bar,
body.gate-sr-active .gate-site-header:not(.gate-site-header--overlap) .gate-site-header__logos-strip,
body.gate-sr-active .gate-site-header:not(.gate-site-header--overlap) .gate-site-header__bar {
  background: var(--gate-sr-bg);
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-site-header__logos-strip {
  border-bottom-color: rgba(11, 18, 32, 0.08);
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-site-header__bar {
  border-bottom: none;
  box-shadow: 0 8px 32px rgba(11, 18, 32, 0.12);
}

body.gate-sr-active .gate-site-header.is-scrolled .gate-site-header__bar {
  background: rgba(243, 239, 223, 0.98);
  box-shadow: 0 8px 32px rgba(11, 18, 32, 0.12);
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-nav-primary .nav-link {
  color: var(--gate-ink) !important;
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-nav-primary .nav-link:hover,
body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-nav-primary .nav-link.active {
  color: var(--gate-brand) !important;
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-nav-primary .nav-link::after,
body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-nav-primary .nav-link.active::after {
  background: var(--gate-brand);
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-mega-trigger,
body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-site-header__toggler {
  color: var(--gate-ink);
  border-color: rgba(11, 18, 32, 0.12);
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-btn--lang {
  color: var(--gate-ink);
  border-color: rgba(11, 18, 32, 0.12);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 12px rgba(11, 18, 32, 0.08);
}

body.gate-sr-active .gate-site-header--overlap:not(.is-scrolled) .gate-btn--training-platform {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Bento grid — same visual layout in AR & EN (slider left, wide right) */
.gate-sr-grid {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(170px, 230px) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--gate-sr-gap);
  height: var(--gate-sr-grid-h);
  grid-template-areas:
    "slider tall wide"
    "slider tall smalls";
  direction: ltr;
}

.gate-sr-grid__slider {
  grid-area: slider;
  min-height: 0;
  height: 100%;
}

/* Vertical focus slider — 3 fixed slots (1 : 2 : 1), equal top/bottom peek */
.gate-sr-vfilm {
  --gate-sr-vfilm-gap: 10px;
  --gate-sr-vfilm-radius: 22px;
  position: relative;
  height: 100%;
  border-radius: var(--gate-sr-vfilm-radius);
  overflow: hidden;
  background: var(--gate-sr-bg);
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.08);
}

.gate-sr-vfilm__viewport {
  display: flex;
  flex-direction: column;
  gap: var(--gate-sr-vfilm-gap);
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.gate-sr-vfilm__slot {
  min-height: 0;
  overflow: hidden;
}

.gate-sr-vfilm__slot--top,
.gate-sr-vfilm__slot--bottom {
  flex: 1 1 0;
}

.gate-sr-vfilm__slot--center {
  flex: 2 1 0;
}

.gate-sr-vfilm__panel {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.gate-sr-vfilm__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.gate-sr-vfilm__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gate-sr-vfilm.is-changing .gate-sr-vfilm__panel {
  opacity: 0.55;
  transform: scale(0.985);
}

.gate-sr-vfilm__slot--center .gate-sr-vfilm__panel {
  box-shadow: 0 4px 18px rgba(11, 18, 32, 0.1);
}

.gate-sr-vfilm__fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 20%;
  z-index: 3;
  pointer-events: none;
}

.gate-sr-vfilm__fade--top {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--gate-sr-bg) 0%,
    rgba(243, 239, 223, 0.92) 50%,
    transparent 100%
  );
}

.gate-sr-vfilm__fade--bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--gate-sr-bg) 0%,
    rgba(243, 239, 223, 0.92) 50%,
    transparent 100%
  );
}

.gate-sr-grid__tall {
  grid-area: tall;
  min-height: 0;
}

.gate-sr-grid__wide {
  grid-area: wide;
  min-height: 0;
}

.gate-sr-grid__smalls {
  grid-area: smalls;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gate-sr-gap);
  min-height: 0;
}

/* Cards */
.gate-sr-card {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.08);
  text-decoration: none;
  color: #fff;
}

.gate-sr-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.gate-sr-card:hover .gate-sr-card__img {
  transform: scale(1.04);
}

.gate-sr-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.05) 0%, rgba(11, 18, 32, 0.72) 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
}

[dir="rtl"] .gate-sr-card__overlay {
  direction: rtl;
}

[dir="ltr"] .gate-sr-card__overlay {
  direction: ltr;
}

.gate-sr-card__title {
  margin: 0;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  color: var(--gate-sr-card-text, #fff);
}

[dir="rtl"] .gate-sr-card__title {
  text-align: right;
}

@media (max-width: 991px) {
  .gate-sr-page {
    --gate-sr-grid-h: auto;
    padding-top: calc(var(--gate-hero-header-offset, 120px) + 1rem);
  }

  .gate-sr-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
    direction: ltr;
    grid-template-areas:
      "slider slider"
      "wide wide"
      "tall tall"
      "smalls smalls";
  }

  [dir="rtl"] .gate-sr-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gate-sr-grid__slider {
    min-height: 320px;
  }

  .gate-sr-grid__wide,
  .gate-sr-grid__tall {
    min-height: 200px;
  }
}

@media (max-width: 575px) {
  .gate-sr-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "slider"
      "wide"
      "tall"
      "smalls";
  }

  [dir="rtl"] .gate-sr-grid {
    grid-template-areas:
      "slider"
      "wide"
      "tall"
      "smalls";
  }

  .gate-sr-grid__smalls {
    grid-template-columns: 1fr;
  }
}