/* ===== Landing – grid 2×2 + diament z ikoną <img> (stabilnie) ===== */

/* KOLORY + PARAMETRY */
:root{
  --lt-bg-page:#fff;
  --lt-fg:#183e90; 
  --lt-fg-dim:#ccc;

  --lt-tile:#12161d;       /* tło ćwiartek, gdy brak obrazka */
  --lt-line:#fff;       /* obrys rombu (1px) */
  --lt-glow:rgba(120,180,255,.35);

  --lt-dim:.30 !important;            /* przyciemnienie kafli (0–1, większe = ciemniej) */
  --lt-diamond:38vmin;     /* rozmiar rombu */
}

/* TYPOGRAFIA – tu się bawisz fontami */
:root{
  --lt-font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --lt-label-weight: 600;     /* ćwiartki */
  --lt-center-weight: 700;    /* środek */
  --lt-label-size: clamp(40px,2.1vmin,22px);
  --lt-center-size: clamp(50px,2.6vmin,28px);
  --lt-letter: .02em;
  --lt-letter-center: .03em;
}

html,body{height:100%;margin:0}

/* KONTENER – pełny ekran + siatka 2×2 */
.lt-landing{
  position:fixed; inset:0; width:100vw; height:100svh; overflow:hidden;
  background:var(--lt-bg-page);

  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* ĆWIARTKI – TYLKO rozjaśnianie (zero borderów, zero skalowania) */
.lt-quad{
  position: relative;
  width:100%; height:100%;
  display:grid; place-items:center;
  text-decoration:none; color:var(--lt-fg-dim);

  border:none; border-radius:0; box-shadow:none;
  text-align:center;
  background: var(--img, var(--lt-tile)) center/cover no-repeat;
  /*filter: brightness(calc(1 - var(--lt-dim)));
  transition: filter .25s ease;*/
}
/*.lt-quad:hover{ filter: brightness(1); }*/

/* Przyciemnienie działa tylko na tło, nie na tekst */
.lt-quad::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0, var(--quad-dim, var(--lt-dim))); /* siła z --lt-dim */
  transition: opacity .25s ease;
  pointer-events:none;
  z-index:0;
}

/* rozjaśnianie na hover */
.lt-quad:hover::before{ opacity:0; }

/* upewnij się, że napis jest nad overlayem */
.lt-quad .label{ position:relative; z-index:1; }

.lt-quad .label{
  font-family: var(--lt-font-family);
  font-weight: var(--lt-label-weight);
  letter-spacing: var(--lt-letter);
  font-size: var(--lt-label-size);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* mapowanie na grid */
.lt-quad.tl{ grid-area: 1 / 1; }
.lt-quad.tr{ grid-area: 1 / 2; }
.lt-quad.bl{ grid-area: 2 / 1; }
.lt-quad.br{ grid-area: 2 / 2; }

/* ŚRODEK – diament (bez zaokrągleń), skaluje się na hover */
.lt-center{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(45deg);
  transform-origin:center;
  width:min(var(--lt-diamond),82vw); aspect-ratio:1/1;

  background:#ffffffff;               
  backdrop-filter: blur(8px) saturate(110%);
  border:1px solid var(--lt-line);
  border-radius:0;

  display:grid; place-items:center;
  text-decoration:none; color:var(--lt-fg);
  z-index:5;

  filter: brightness(calc(1 - var(--lt-dim) + .05));
  transition: transform .35s ease, filter .35s ease, background .35s ease, box-shadow .35s ease;
  overflow:hidden;
}
.diamond {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.diamond .onas {
  margin-bottom: 10px; 
  font-weight: bold;
  color: #183e90;      
  font-size: 1.2em;    
  z-index: 2;
}

/* Ikona w środku – KONTRA-obrót, nie psuje layoutu */
.lt-center .center-icon{
  position:absolute;
  left:50%; top:50%;
  width: var(--icon, 100%);   /* <<< tu sterujesz wielkością ikony */
  height:auto;
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin:center;
  pointer-events:none;       /* klik idzie w link rombu */
  z-index:1;
}

/* Label nad ikoną */
.lt-center .label{
  position:absolute; z-index:2;
  left:10%;
  top: 20%;
  transform: rotate(-45deg);
  font-family: var(--lt-font-family);
  font-weight: var(--lt-center-weight);
  letter-spacing: var(--lt-letter-center);
  font-size: var(--lt-center-size);
 
}

.lt-center:hover{
  transform: translate(-50%,-50%) rotate(45deg) scale(1.04);
  filter: brightness(1);
  background:#ffffffff;               
  box-shadow: 0 28px 70px -20px var(--lt-glow);

}

/* Tryb IKON dla ćwiartek (opcjonalnie) – kontrola % szerokości */
.lt-quad.icon{
  background-size: var(--size, 70%) auto;
  background-position:center;
  background-repeat:no-repeat;
}

/* RESPONSYWNOŚĆ – mniejsze ikony i ewentualnie mniejszy diament */
@media (max-width:1024px){
  .lt-quad.icon{ --size:58%; }
}
@media (max-width:640px){
  .lt-quad.icon{ --size:46%; }
  .lt-landing{ --lt-diamond:44vmin; }
}
@media (max-width:430px){
  .lt-quad.icon{ --size:40%; }
  .lt-landing{ --lt-diamond:48vmin; }
}
/* === MOBILE LAYOUT: 1 kolumna, 5 kafli – pełna szerokość === */
@media (max-width: 760px){

  /* zamiast fixed fullscreen -> normalny flow + scroll */
  .lt-landing{
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100svh;
    display: flex;             /* kolumna */
    flex-direction: column;
  }

  /* każdy kafel pełna szerokość, stała wysokość (zmień wg uznania) */
  .lt-quad, .lt-center{
    position: relative;
    width: 100%;
    height: clamp(160px, 42vh, 320px);
    margin: 0;
  }

  /* kafle tła: nie skalujemy na hover, tylko jaśniej (to już masz),
     wymuś cover; ikony w tle pomniejszone */
  .lt-quad{
    background-size: cover;
    background-position: center;
  }
  .lt-quad.icon{ --size: 42%; }     /* jeżeli używasz .icon */

  /* KOLEJNOŚĆ (top-left, top-right, CENTER, bottom-left, bottom-right) */
  .lt-quad.tl{ order: 1; }
  .lt-quad.tr{ order: 2; }
  .lt-center { order: 3; }
  .lt-quad.bl{ order: 4; }
  .lt-quad.br{ order: 5; }

  /* ŚRODEK: na mobile KWADRAT (bez rotacji), nic nie wyjeżdża */
  .lt-center{
    position:relative;
    transform: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.88); /* jeśli masz inny kolor – zostaw swój */
    box-shadow: none;
    filter: brightness(calc(1 - var(--lt-dim)));
  }
  .lt-center:hover{
    transform: none;            /* brak skali na mobile, jak chcesz – włącz */
    box-shadow: none;
    filter: brightness(1);
  }
  .lt-center .label{ transform: none; }
  .lt-center .center-icon{ transform: translate(-50%, -50%); }
  .lt-center::before{ transform: translate(-50%, -50%); }
  .lt-center .label, .lt-center .center-icon, .lt-center::before{ position:relative; z-index:1; }

  .lt-center::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0, var(--lt-dim));
  z-index:0; pointer-events:none;
}
  /* trochę większe napisy na mobile – opcjonalnie */
  .lt-quad .label{ font-size: clamp(16px, 5vw, 20px); }
  .lt-center .label{ font-size: clamp(18px, 6vw, 22px); }
}
/* Ustawienia efektu (możesz podkręcić) */
:root{
  --quad-zoom: 110%;   /* 108–112% wygląda najlepiej */
  --quad-pan: 6%;      /* jak daleko od środka przesunąć obraz */
}

/* Bazowe tło ćwiartek – start w centrum, lekki pre-zoom żeby nie było białych krawędzi */
.lt-quad{
  background-position: 50% 50%;
  background-size: 104%;                   /* zawsze >100%, unikamy „pasków” */
  transition:
    background-size .45s ease,
    background-position .45s ease,
    filter .25s ease;
  will-change: background-size, background-position;
}

/* Wspólny zoom na hover */
.lt-quad:hover{
  background-size: var(--quad-zoom);
}

/* Pan „od środka” zależnie od położenia kafla */
.lt-quad.tl:hover { /* top-left -> w lewy górny róg */
  background-position:
    calc(50% - var(--quad-pan))
    calc(50% - var(--quad-pan));
}
.lt-quad.tr:hover { /* top-right -> w prawy górny róg */
  background-position:
    calc(50% + var(--quad-pan))
    calc(50% - var(--quad-pan));
}
.lt-quad.bl:hover { /* bottom-left -> w lewy dolny róg */
  background-position:
    calc(50% - var(--quad-pan))
    calc(50% + var(--quad-pan));
}
.lt-quad.br:hover { /* bottom-right -> w prawy dolny róg */
  background-position:
    calc(50% + var(--quad-pan))
    calc(50% + var(--quad-pan));
}
/* === MOBILE: logo = 1fr, każdy kafel = 2fr (logo ma 1/2 wysokości kafla) === */
@media (max-width: 760px){

  /* kontener: 1 kolumna, 5 wierszy = 1 + 4*2 = 9 fr -> pełne 100dvh */
  .lt-landing{
    position: relative; inset: auto;
    width: 100%; height: 100dvh;        /* pełny ekran, bez pasków */
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr repeat(4, 2fr);
    background: var(--lt-bg-page);
  }

  /* logo – pierwszy wiersz (1fr) */
  .lt-mobile-logo{
    grid-area: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 0 0px;
    background: var(--lt-bg-page);
  }
  .lt-mobile-logo img{
    max-height: 50%; width: auto; display: block;
  }

  /* ukryj logo na desktopie */
  /*body:not(.force-mobile) .lt-mobile-logo{ display: none; } */
  @media (min-width: 761px){ .lt-mobile-logo{ display:none; } }

  /* 4 sekcje pod logo – każdy kafel = 2fr, pełne wypełnienie obrazem */
  .lt-quad,
  .lt-center{      /* środek chowamy na mobile niżej */
    width: 100%; height: 100%;
    margin: 0; border: 0; border-radius: 0;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: none;
  }

  /* kolejność: TL, TR, (bez środka), BL, BR */
  .lt-quad.tl { grid-area: 2 / 1; }
  .lt-quad.tr { grid-area: 3 / 1; }
  .lt-quad.bl { grid-area: 4 / 1; }
  .lt-quad.br { grid-area: 5 / 1; }

  /* romb wyłączamy w mobilce, żeby nie rozjeżdżał wysokości */
  .lt-center{ display: none !important; }

  /* zero hover-animacji na dotyku (opcjonalnie) */
  .lt-quad:hover{
    background-size: cover;
    background-position: center center;
  }
}

/* Fallback dla starszych Safari bez dvh */
@supports not (height: 100dvh){
  @media (max-width: 760px){
    .lt-landing{ height: 100svh; }
  }
}
/* desktop: domyślnie logo mobilne schowane */
.lt-mobile-logo{ display:none; }

@media (max-width:760px){
  /* układ: logo (1fr) + 4 kafle (2fr każdy) */
  .lt-landing{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr repeat(4, 2fr);
    width:100%; height:100dvh; overflow:hidden;
  }

  /* LOGO – widoczne na mobile, wyrównanie do LEWEJ */
  .lt-mobile-logo{
    grid-area: 1 / 1;
    display:flex;                /* ważne: włącz wyświetlanie */
    align-items:center; 
    justify-content:flex-start;  /* <-- lewo */
    padding: 0 16px;
    background: var(--lt-bg-page);
    z-index:30;
  }
  .lt-mobile-logo img{
    height: 80%;                 /* dopasuj wizualnie (70–90%) */
    width: auto;
    max-width: 90%;
    object-fit: contain;
    display:block;
  }

  /* reszta rzędów */
  .lt-quad.tl { grid-area: 2 / 1; }
  .lt-quad.tr { grid-area: 3 / 1; }
  .lt-quad.bl { grid-area: 4 / 1; }
  .lt-quad.br { grid-area: 5 / 1; }

  /* kafle: zawsze wypełniają */
  .lt-quad{ background-size: cover !important; background-position: center !important; }
  .lt-center{ display:none !important; } /* romb off w mobilce */
}

/* fallback dla starszego Safari */
@supports not (height:100dvh){
  @media (max-width:760px){ .lt-landing{ height:100svh; } }
}