@layer variables {
  :root{
	--R:27;
	--flex-aside:0;
  }
}

@layer controller {
  header>div{flex:61 1 0%;}
  .header-divider{height:3px;background:rgba(255,255,255,.1);border-radius:999px;}
  .header-divider .progress-fill{top:0;}
  .header-divider:hover .progress-fill{height:8px;}

  .left.thumb-grid{align-content:flex-start;}
  .left.thumb-grid a{display:block;}
  .left.thumb-grid .thumb-item{position:relative;display:block;border-radius:4px;aspect-ratio:1/1;}
  .left.thumb-grid .thumb-item:not(.pano-thumb)>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;}
  .left.thumb-grid .thumb-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 6px 4px;font-size:12px;font-weight:100;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));}
  .left.thumb-grid.layout-normal{grid-template-columns:repeat(5,minmax(0,1fr));}
  .left.thumb-grid.layout-special{grid-template-columns:repeat(12,minmax(0,1fr));}
  .left.thumb-grid.layout-special .thumb-item.photo{grid-column:span var(--span,3);}
  .left.thumb-grid.layout-special.t2,.left.thumb-grid.layout-special.t3{align-content:center;}

  .left.thumb-grid .thumb-item.pano-thumb{
    /* ВАЖНО: больше НЕ на всю ширину */
    grid-column: auto;

    /* по размеру как обычная квадратная плитка */
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;

    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;

    transition: filter .25s ease, transform .18s ease;
  }

  /* в special-layout фото обычно span 3, pano делаем таким же */
  .left.thumb-grid.layout-special .thumb-item.pano-thumb{
    grid-column: span 3;
  }

  .left.thumb-grid .thumb-item.pano-thumb:hover{
    filter: brightness(1.10);
    transform: translateY(-1px);
  }

  /* мягкий градиент под текст для читабельности */
  .left.thumb-grid .thumb-item.pano-thumb::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.08) 55%, rgba(0,0,0,0));
  }

  .left.thumb-grid .thumb-item.pano-thumb .pano-title{
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.25;
    padding: 0;
    width: 100%;

    /* аккуратное обрезание */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .pano-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
  .pano-overlay.visible{display:flex;}
  .pano-overlay-box{position:relative;width:min(500px,90vw);height:min(500px,80vh);border-radius:18px;padding:22px 20px 18px;color:#fff;box-shadow:0 18px 45px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;}
  .pano-overlay-title{font-size:20px;font-weight:600;margin-bottom:10px;}
  .pano-overlay-text{font-size:14px;line-height:1.5;overflow-y:auto;padding-right:8px;}
  .pano-overlay-close{position:absolute;top:8px;right:12px;border:0;background:transparent;color:#fff;font-size:22px;cursor:pointer;}
  body.pano-open{overflow:hidden;}
  
  @media (max-width: 800px){

    /* подписи у обычных фото на мобилке прячем */
    .left.thumb-grid .thumb-item.photo .thumb-caption{
      display: none !important;
    }

    /* pano — увеличенный квадрат, чтобы текст читался */
    .left.thumb-grid .thumb-item.pano-thumb{
      grid-column: span 2;      /* в normal layout выглядит как "вдвое шире" */
      aspect-ratio: 1 / 1;
      border-radius: 10px;
      padding: 10px;
    }

    /* в special-layout фото span 3 → pano делаем span 6 (ровно в 2 раза шире) */
    .left.thumb-grid.layout-special .thumb-item.pano-thumb{
      grid-column: span 6;
    }

    .left.thumb-grid .thumb-item.pano-thumb .pano-title{
      font-size: 11px;
      line-height: 1.2;
      -webkit-line-clamp: 6;
    }
  }
  
  
  @media (max-width: 800px){

    /* --- 1) КАРТА: мягче углы (оставляем) --- */
    .top-map.map-promoted-mobile{
      margin: 0 0 12px 0;
	 
    }

    .top-map.map-promoted-mobile .wrap.middle{

      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(0,0,0,.28);
    }
	
	.gmfix {display: none;}

    .top-map.map-promoted-mobile #map,
    .top-map.map-promoted-mobile .gmfix{
      border-radius: 16px !important;
      overflow: hidden;
    }
	
	.top-map.map-promoted-mobile #map {
		height: 200px !important;
		margin-bottom: 35px !important;
	}

    /* --- 2) PANO: НЕ full-width, а "широкая плитка" --- */
    .left.thumb-grid .thumb-item.pano-thumb{
      /* вместо 1/-1 */
      grid-column: span 2 !important;

      /* широкая плитка, но не баннер */
      aspect-ratio: 2 / 1 !important;
      min-height: 88px;
      height: auto !important;

      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }

    /* если у тебя special-layout (где плитки крупнее), сделаем pano x2 от обычной */
    .left.thumb-grid.layout-special .thumb-item.pano-thumb{
      grid-column: span 6 !important; /* если обычная плитка = span 3 */
      aspect-ratio: 2 / 1 !important;
      min-height: 92px;
    }

    /* если внутри есть превью-картинка — приглушаем */
    .left.thumb-grid .thumb-item.pano-thumb img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .18;
      filter: blur(1px) saturate(.9);
      z-index: 0;
      pointer-events: none;
    }

    .left.thumb-grid .thumb-item.pano-thumb::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,.14) 55%, rgba(0,0,0,.04)),
        radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.08), rgba(255,255,255,0));
      pointer-events: none;
    }

    .left.thumb-grid .thumb-item.pano-thumb .pano-title{
      position: relative;
      z-index: 1;
      width: 100%;
      margin: 0;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,.35);

      font-size: 12px;
      line-height: 1.22;
      font-weight: 700;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    @media (max-width: 380px){
      .left.thumb-grid .thumb-item.pano-thumb{
        min-height: 82px;
        padding: 9px 10px;
      }
      .left.thumb-grid .thumb-item.pano-thumb .pano-title{
        font-size: 11px;
      }
    }
  }
  
  
  
  @media (max-width: 800px){

    /* Страховка от горизонтального скролла */
    html, body{
      overflow-x: hidden;
    }
    .page, .page .main, .left.thumb-grid{
      max-width: 100%;
      overflow-x: clip;
    }
    .left.thumb-grid > *{
      min-width: 0;
      box-sizing: border-box;
    }

    /* Карту оставляем красивой */
    .top-map.map-promoted-mobile{
      margin: 0 0 12px 0;
    }
    .top-map.map-promoted-mobile .wrap.middle{
      height: clamp(180px, 28vh, 240px);
      min-height: 180px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(0,0,0,.28);
    }
    .top-map.map-promoted-mobile #map,
    .top-map.map-promoted-mobile .gmfix{
      border-radius: 16px !important;
      overflow: hidden;
    }

    /* Обычные подписи у фото скрыты */
    .left.thumb-grid .thumb-item.photo .thumb-caption{
      display: none !important;
    }

    /* Чтобы плитки плотнее укладывались */
    .left.thumb-grid{
      grid-auto-flow: dense;
    }

    /* ==== PANO: ВСЕГДА 2x1 (ширина двух фото, высота одного фото) ==== */
    .left.thumb-grid .thumb-item.pano-thumb,
    .left.thumb-grid.layout-special .thumb-item.pano-thumb{
      grid-column: span 2 !important;   /* строго 2 клетки по ширине */
      grid-row: span 1 !important;      /* строго 1 клетка по высоте */

      width: 100%;
      max-width: 100%;
      min-width: 0;

      aspect-ratio: 2 / 1 !important;   /* геометрия фиксированная */
      min-height: 0 !important;
      height: auto !important;

      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 10px 12px;
      border-radius: 12px;
      overflow: hidden;
      isolation: isolate;
      box-sizing: border-box;
    }

    /* Если внутри pano есть превью-изображение — приглушаем */
    .left.thumb-grid .thumb-item.pano-thumb img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .16;
      filter: blur(1px) saturate(.9);
      z-index: 0;
      pointer-events: none;
    }

    /* Подложка для читаемости текста */
    .left.thumb-grid .thumb-item.pano-thumb::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,.16) 60%, rgba(0,0,0,.03)),
        radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.08), rgba(255,255,255,0));
    }

    /* Текст не ломает размер плитки */
    .left.thumb-grid .thumb-item.pano-thumb .pano-title{
      position: relative;
      z-index: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* максимум 2 строки */
      overflow: hidden;

      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;

      color: #fff;
      font-weight: 700;
      font-size: 12px;
      line-height: 1.2;
      text-shadow: 0 1px 2px rgba(0,0,0,.35);

      word-break: break-word;
      overflow-wrap: anywhere;
    }

    /* На очень узких экранах чуть компактнее */
    @media (max-width: 380px){
      .left.thumb-grid .thumb-item.pano-thumb,
      .left.thumb-grid.layout-special .thumb-item.pano-thumb{
        padding: 9px 10px;
        border-radius: 10px;
      }

      .left.thumb-grid .thumb-item.pano-thumb .pano-title{
        font-size: 11px;
      }
    }
  }
  
}