:root {
    --gap: 0;
    --EverGreen: #0F433B;
    --GreenIbis: #00785F;
    --Herbal: #00AB78;
    --Fiery: #FF612F;
    --Snow: #FFF;
    --Black: #282828;
}

@font-face {
    font-family: 'Ruberoid';
    src: url('../fonts/ruberoid-extralight.otf') format('opentype'),
        url('../fonts/ruberoid-extralight-webfont.woff2') format('woff2'),
        url('../fonts/ruberoid-extralight-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ruberoid';
    src: url('../fonts/ruberoid-regular.otf') format('opentype'),
        url('../fonts/ruberoid-regular-webfont.woff2') format('woff2'),
        url('../fonts/ruberoid-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ruberoid';
    src: url('../fonts/ruberoid-bold.otf') format('opentype'),
	url('../fonts/ruberoid-bold-webfont.woff2') format('woff2'),
        url('../fonts/ruberoid-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ruberoid';
    src: url('../fonts/ruberoid-extrabold.otf') format('opentype'),
	url('../fonts/ruberoid-extrabold-webfont.woff2') format('woff2'),
        url('../fonts/ruberoid-extrabold-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Ruberoid', Verdana, sans-serif;
}

body {
    margin: 0;
}

.split-gate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100svh;
    position: relative;
    isolation: isolate;
}

.pane {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    outline: none;
    background: rgba(0, 0, 0, 0.4);
}  

.pane__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right;
    transform: scale(1.05);
    transition: transform 0.5s ease;
    will-change: transform;
    z-index: -10;

}
.pane:hover .pane__bg,
.pane:focus .pane__bg {
    transform: scale(1);
}

.logo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: start center;
    pointer-events: none;
    z-index: 3;
    margin-top: 20px;
    margin-left: 20px;
}

.pane__iner {
  position: relative;
}

.pane__inner .title {
    z-index: 10;
    color: #fff;
    position: relative;
    bottom: 0;
    left: 0;
    font-size: 50px;
    background-color: rgba(255, 97, 47, 0.5);
    border-radius: 50px;
    padding: 10px 12px;
}

.pane__inner .title:hover {
  background-color: rgba(15, 67, 59, 0.5);
}

.cta {
  display: none;
}

@media (max-width: 900px) {
  .split-gate {
    grid-template-columns: 1fr;      /* вертикально */
    grid-auto-rows: minmax(45svh, 1fr);
    min-height: 100svh;
  }

  .pane {
    min-height: 50svh;
    place-items: end center;
  }

  /* розмір текстів — трохи менший */
  .pane__inner .title {
    font-size: 30px;
  }

  .cta {
    display: block;
    font-size: 30px;
    margin: 0 auto 20px;
    background-color: var(--EverGreen);
    color: var(--Fiery);
    border: 1px solid var(--EverGreen);
    border-radius: 25px;
    width: 50px;
    text-align: center;
    position: relative;
    z-index: 111;
  }

  .cta:hover {
      background-color: var(--Fiery);
      color: var(--EverGreen);
      border: 1px solid var(--Fiery);
    }

  .pane__inner .title {
    background-color: rgba(255, 97, 47, 0);
  }
}



  /* тонкий роздільник між блоками */
  /* .pane + .pane {
    border-top: 1px solid rgba(255,255,255,.15);
  } */

  .logo {
    /* position: absolute; */
    display: grid;
    place-items: start;
    /* top: 46%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    pointer-events: none;
    z-index: 3;
    /* background-color: rgba(0, 0, 0, (0.4)); */
  }
  .logo img {
    max-width: 150px;
    height: auto;
    /* background-color: rgba(0, 0, 0, (0.4)); */
  }

/* ===== Ландшафт на телефонах (низькі екрани ≤ 480px) ===== */
@media (max-height: 480px) and (max-width: 900px) {
  .pane { min-height: 60svh; }       /* трошки вищі секції для жестів */
  .title { 
    font-size: clamp(16px, 5vw, 24px); 
  }


}