/* =========================================================
   SCSS.CSS
   1024 × 768 LANDSCAPE FINOMHANGOLÁS
   ========================================================= */

@media (orientation: landscape) and (max-width: 1024px) {

  /* ---------------------------------------------------------
     1. LOGÓ – nem torzul, arányos, középre igazított
     --------------------------------------------------------- */

  :root {
    --logo-width: 8vw;        /* enyhén nagyobb logó, nem túl kicsi, nem óriási */
    --logo-height: 12vh;      /* arányos magasság */
    --nav-height: 7vh;        /* ehhez igazodnak a pozíciók */
  }

  .logo {
    width: var(--logo-width);
    height: var(--logo-height);
    background-color: #ffffff;    /* fehér háttér → nem látszik háttérkép a széleken */
    box-sizing: border-box;       /* ne csússzon el a headerhez képest */
  }

  .logo img {
    height: 100%;
    width: auto;               /* NEM torzul */
    object-fit: contain;       /* megtartja a képarányt */
    display: block;
    margin: 0 auto;            /* középre */
  }

  /* ---------------------------------------------------------
     2. HEADER – igazodjon a logóhoz, ne legyen elcsúszás
     --------------------------------------------------------- */

  header {
    height: var(--logo-height);   /* header = logó magassága → közös alapvonal */
    top: var(--nav-height);
    left: var(--logo-width);
    box-sizing: border-box;       /* pontos illeszkedés */
  }

  header h1 {
    font-size: 1.35rem;
    text-align: center;
    padding: 0 0.8rem;
  }

  /* ---------------------------------------------------------
     3. NAVIGÁCIÓ
     --------------------------------------------------------- */

  .topnav {
    gap: 0.5rem;
    padding: 0 0.5rem;
    height: var(--nav-height);
  }

  .topnav .nav-btn {
    font-size: 0.9rem;
  }

  /* ---------------------------------------------------------
     4. KÖZÖS SZEKCIÓK – finomított elrendezés
     --------------------------------------------------------- */

  #home,
  #galeria,
  #etlap,
  #korlatlan,
  #panzio,
  #kapcsolat {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 1.3rem;     /* általad használt érték – stabil, szép */
  }

  .white-box {
    padding: 1.3rem;
    border-radius: 2vw;
    box-shadow: 0 0 10px rgba(0,0,0,0.12);
  }

  /* ---------------------------------------------------------
     5. FŐOLDAL
     --------------------------------------------------------- */

  #home h2 {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }

  #home p {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  /* ---------------------------------------------------------
     6. KORLÁTLAN
     --------------------------------------------------------- */

  #korlatlan h2 {
    font-size: 1.55rem;
    margin-bottom: 0.8rem;
  }

  #korlatlan p {
    font-size: 1.05rem;
  }

  /* ---------------------------------------------------------
     7. GALÉRIA
     --------------------------------------------------------- */

  #galeria h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  /* A thumbs, big stb. NEM módosul → stabil marad az elrendezés */

  /* ---------------------------------------------------------
     8. ÉTLAP
     --------------------------------------------------------- */

  #etlap h2 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
  }

  #etlap .etlap-grid {
    grid-template-columns: 1fr;   /* 1024-en 1 oszlop */
    gap: 1.2rem;
  }

  #etlap .etlap-grid div {
    font-size: 1.05rem;
    line-height: 1.5;
  }

  #etlap .etlap-grid h3 {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
  }

  #etlap .etlap-grid p {
    font-size: 1rem;
  }

  /* ---------------------------------------------------------
     9. PANZIÓ
     --------------------------------------------------------- */

  #panzio .white-box {
    font-size: 1.05rem;
    line-height: 1.5;
  }

  #panzio p {
    margin-bottom: 0.6rem;
  }

  /* ---------------------------------------------------------
     10. KAPCSOLAT
     --------------------------------------------------------- */

  #kapcsolat h2 {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
  }

  #kapcsolat .kapcsolat-text h2:nth-of-type(2) {
    font-size: 1.35rem;
    margin-top: 0.2rem;
  }

  #kapcsolat p {
    font-size: 1rem;
  }

  .kapcsolat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .kapcsolat-image img {
    width: 22vw;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}