/* ======= Alap stílusok ======= */
body { font-family: 'Lora', serif; }
header {
  background: url('/pics/retes5.jpg') center/cover no-repeat;
  height: 84vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
header .header-content {
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  color: #000;
}
section { padding: 80px 0; }
.navbar { background-color: #fff; border-bottom: 1px solid #ddd; }
.navbar .navbar-nav { margin: 0 auto; }
.navbar .nav-item { margin: 0 10px; }
.gallery-img { max-height: 200px; object-fit: cover; }
.custom-nav { background-color: #ff5f1f; padding-top: 1rem; padding-bottom: 1rem; border-bottom: none; }
.nav-link:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff !important; }
.navbar-logo { height: 70px; max-height: 100%; width: auto; object-fit: contain; }
@media (max-width: 768px) { .navbar-logo { height: 56px; } }

/* ======= Mobil finomhangolás ======= */
@media (max-width: 575.98px) {
  #rolunk .container, #viszontelado .container { padding-left: 0 !important; padding-right: 0 !important; }
  #rolunk [style*="padding: 0 4rem"], #viszontelado [style*="padding: 0 4rem"] { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 575.98px) { section { padding: 48px 0; } }

header::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
header .header-content { position: relative; z-index: 1; color: #fff; }
header .header-content h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
header .header-content p { font-size: clamp(1rem, 3.5vw, 1.25rem); margin-bottom: 0; }
@media (max-width: 575.98px) { header { height: 68vh; } }

.navbar-toggler { border-color: rgba(255,255,255,.6); }
.navbar-toggler:focus { box-shadow: 0 0 0 .1rem rgba(255,255,255,.4); }
.navbar-toggler-icon { filter: invert(1) brightness(2); }

@media (max-width: 575.98px) {
  #kapcsolat .border.rounded { padding: 1rem !important; }
}

/* ======= Galéria képek – arányok megőrzése ======= */
.gallery-thumb {
  width: 100%;
  height: auto;           /* NINCS crop, eredeti arány megmarad */
  display: block;
  border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* ======= Desktop: okos kiegyensúlyozott masonry (JS építi fel) ======= */
@media (min-width: 1200px) {
  /* Mobil wrapper rejtése desktopon (JS is kapcsolja, de itt is biztosítjuk) */
  .gallery-wrapper { display: none !important; }
  #loadMoreBtn { display: none !important; }

  /* Masonry konténer: több oszlop egymás mellett */
  #masonryContainer {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  /* Egy-egy oszlop */
  #masonryContainer .masonry-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0; /* flex overflow fix */
  }
  /* Elemenkénti „kártya” */
  #masonryContainer .masonry-item {
    margin: 0;
  }
}

/* ======= Vissza a tetejére (mobil + desktop) ======= */
#backToTop {
  position: fixed;
  right: 16px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #6c757d;
  background: rgba(255,255,255,.95);
  color: #6c757d;
  font-size: 20px;
  line-height: 1;
  display: none;             /* JS teszi láthatóvá */
  align-items: center;
  justify-content: center;
  z-index: 1050;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: background .2s, color .2s, transform .1s;
}
#backToTop:hover { background: #6c757d; color: #fff; }
#backToTop:active { transform: scale(0.98); }
#backToTop.show { display: flex; }

  /* Konténer – mobilon is kellemesen kezelhető, nagy érintési felület */
  .social-links{
    display:flex; flex-wrap:wrap; gap:.6rem;
    justify-content:center; align-items:center;
    padding:12px 14px; border-radius:14px;
  }
  /* Gombok (min. 44px magas az érintési cél) */
  .sl-btn{
    display:flex; align-items:center; gap:.5rem;
    text-decoration:none; font-weight:600;
    padding:.65rem .9rem; border:2px solid currentColor;
    border-radius:12px; min-height:44px;
    transition:transform .08s ease, background .15s ease, color .15s ease;
    user-select:none;
  }
  .sl-btn:hover{ transform: translateY(-1px); }
  .sl-btn svg{ display:block; fill:currentColor; }

  /* Márkaszínek + hover */
  .sl-tiktok{ color:#111; }
  .sl-tiktok:hover{ color:#fff; background:#111; }

  .sl-instagram{ color:#E1306C; }
  .sl-instagram:hover{ color:#fff; background:#E1306C; }

  .sl-facebook{ color:#1877F2; }
  .sl-facebook:hover{ color:#fff; background:#1877F2; }

  /* Mobil finomhangolás: teljes szélességű, középre zárt gombok */
  @media (max-width: 575.98px){
    .social-links{ padding:10px 8px; }
    .sl-btn{ flex:1 1 calc(50% - .6rem); justify-content:center; }
  }

  /* iPad (tablet) portré: maradjon a mobilos "lenyitható" nézet */
  @media (min-width: 576px) and (max-width: 991.98px) {
    /* 1 oszlopra kényszerítés */
    .gallery-group > [class^="col-"],
    .gallery-group > [class*=" col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .gallery-group .gallery-thumb {
      width: 75% !important;
      max-width: 75% !important;
      height: auto;          /* arány megőrzése */
      display: block;
      margin: 0 auto;        /* középre */
    }
  }

  /* Masonry: az újonnan létrehozott képek is legyenek szépek és teljes szélességűek */
  #masonryContainer .masonry-item img{
    display:block;
    width:100%;
    height:auto;              /* nincs torzítás */
    border-radius:.5rem;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
  }
  
  /* Viszonteladóknak szekció – mobilon legyen oldalsó hézag */
  @media (max-width: 575.98px) {
    /* az előző, 0 paddinges mobil szabály felülírása */
    #viszontelado .container {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    /* biztos ami biztos: a kép blokkszintű és teljes szélességű marad */
    #viszontelado img.img-fluid {
      display: block;
      width: 100%;
      height: auto;
    }
  }

/* Cookie banner */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.85);
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  z-index: 2000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.cookie-notice.hide {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}