/* css/mobile-landscape.css */
/* =========================================================
   MOBILE LANDSCAPE - Умное масштабирование
   
   Desktop CSS работает, но размеры адаптируются через clamp()
   для корректного отображения на узком landscape экране.
   
   Принцип: min() выбирает меньшее значение между desktop 
   и масштабированным для landscape.
   ========================================================= */

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  
  /* === СКРЫТЬ MOBILE ЭЛЕМЕНТЫ === */
  .eler-sticky {
    display: none !important;
  }
  
  .mobile-footer {
    display: none !important;
  }
  
  /* =========================================================
     УМНОЕ МАСШТАБИРОВАНИЕ
     Desktop ~1920px, Landscape ~896px = коэффициент ~0.5
     Используем min() чтобы не превышать desktop размеры
     ========================================================= */
  
  /* === HERO TITLE (текст с кружочками) === */
  .hero-title-container {
    top: 3vh;
    width: 65vw;
  }
  
  .hero-title {
    font-size: min(4.5vw, 8vh);
  }
  
  /* === CONSTANT LAYER ("Я создаю...") === */
  #constant-layer {
    top: auto;
    bottom: 22vh;
    right: 3vw;
  }
  
  .constant-text .line {
    font-size: min(2.6vw, 4.5vh);
  }
  
  /* === NAME LAYER ("КОСТИНА ИРИНА") === */
  #name-layer {
    bottom: 12vh;
    right: 3vw;
  }
  
  .name-title {
    font-size: min(3vw, 5vh);
  }
  
  /* === UI LAYER (links) === */
  .ui-layer {
    bottom: 2vh;
    right: 3vw;
  }
  
  .ui-links {
    font-size: min(1.75rem, 3.5vh);
    gap: 8px;
  }
  
  /* === HERO PHOTO === */
  .hero-photo-wrapper {
    max-width: min(25vw, 45vh);
  }
  
  /* === EULER === */
  .eler-layer {
    width: min(45vw, 70vh);
  }
  
  /* === INTRO TEXT === */
  .intro-line {
    font-size: min(5vw, 9vh);
  }
  
  /* === CARDS === */
  .card-small { width: min(16vw, 28vh); }
  .card-large { width: min(34vw, 60vh); }
  .card-vertical { width: min(18vw, 32vh); }
  .card-horizontal { width: min(26vw, 46vh); }
  .card-video-vertical { width: min(18vw, 32vh); }
  
  /* === LANGUAGE PANEL === */
  .lang-panel-inner {
    gap: 10px;
    padding: 8px 12px;
  }
  
  .lang-avatar {
    width: min(36px, 8vh);
    height: min(36px, 8vh);
  }
  
  .lang-name {
    font-size: min(0.75rem, 2vh);
  }
}