/* Composit Studio — portfólió elemek (filmek, galéria, lejátszó, képnézegető)
   Használja: index.html, filmek.html, galeria.html — a :root változókat az oldal adja. */

/* ── FILMEK ── */
#films { background: var(--parchment); }
.films-header { margin-bottom: 3.5rem; }
.films-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1.75rem;
}
.film-card {
  all: unset; cursor: pointer; text-align: left;
  /* a <button> magától függőlegesen középre teszi a tartalmát, ha a sor
     magasabb nála (pl. a szomszéd kártyán van helyszín-alcím) → felülre kényszerítjük */
  display: flex; flex-direction: column; justify-content: flex-start;
  align-self: start;
}
.film-card:focus-visible { outline: 1px solid var(--bark); outline-offset: 6px; }
.film-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink);
}
.film-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease, transform .6s ease;
}
.film-thumb img.loaded { opacity: 1; }
.film-card:hover .film-thumb img { transform: scale(1.03); }
.film-thumb::before {               /* sötétítés */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(26, 20, 16, .28); transition: background .4s;
}
.film-thumb::after {                /* play gomb */
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 1px solid rgba(253, 253, 253, .85);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M26 21v22l18-11z' fill='%23fdfdfd'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: transform .4s, background-color .4s;
}
.film-card:hover .film-thumb::before { background: rgba(26, 20, 16, .1); }
.film-card:hover .film-thumb::after  { transform: scale(1.08); background-color: rgba(196, 168, 130, .35); }
.film-meta { display: block; margin-top: 1rem; }
.film-name {
  display: block; font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 1.3rem; color: var(--ink); line-height: 1.3;
}
.film-place {
  display: block; margin-top: .35rem; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.films-more { margin-top: 3.5rem; text-align: center; }
.films-more a {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding-bottom: 4px;
  border-bottom: 1px solid var(--sand); transition: color .3s, border-color .3s;
}
.films-more a:hover { color: var(--bark); border-color: var(--bark); }

/* film lejátszó */
#film-modal {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 4vw;
  background: rgba(26, 20, 16, .94);
}
#film-modal.open { display: flex; }
.film-modal-frame { width: min(1200px, 100%); aspect-ratio: 16 / 9; background: #000; }
.film-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.film-modal-close, .lb-close {
  all: unset; position: absolute; top: 1rem; right: 1.5rem; cursor: pointer; z-index: 2;
  font-size: 2.5rem; line-height: 1; color: var(--cream); opacity: .75;
}
.film-modal-close:hover, .lb-close:hover { opacity: 1; }

/* ── GALÉRIA (masonry) ── */
#gallery { padding: 7rem 0; background: var(--ink); overflow: hidden; }
.gallery-header { padding: 0 8vw; margin-bottom: 3rem; }
.gallery-header .section-title { color: var(--cream); }
.gallery-header .section-eyebrow { color: var(--sand); }
.gallery-header .section-sub { color: rgba(250,246,240,.55); }
.gallery-grid { display: flex; align-items: flex-start; gap: 12px; padding: 0 8vw; }
.g-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.g-tile { display: block; position: relative; overflow: hidden; background: #241c16; cursor: zoom-in; }
.g-tile img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: brightness(.92) saturate(.9);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}
.g-tile.loaded img { opacity: 1; }
.g-tile:hover img { transform: scale(1.04); filter: brightness(1) saturate(1.05); }
.g-tile:focus-visible { outline: 1px solid var(--sand); outline-offset: 3px; }

/* főoldali válogatás: levágott alj, elhalványítva a gomb felé */
.gallery-preview { position: relative; max-height: min(1000px, 120vh); overflow: hidden; }
.gallery-preview.is-cut::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  background: linear-gradient(to bottom, rgba(26,20,16,0), var(--ink));
  pointer-events: none;
}

.gallery-more { text-align: center; margin-top: 3rem; }
.gallery-more a, .gallery-more button {
  display: inline-block; font-family: 'Jost', sans-serif; font-size: .82rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream); text-decoration: none;
  background: transparent; border: 1px solid rgba(196,168,130,.5);
  padding: .9rem 2rem; cursor: pointer; transition: border-color .2s, color .2s;
}
.gallery-more a:hover, .gallery-more button:hover { border-color: var(--sand); color: var(--sand); }
.gallery-preview + .gallery-more { margin-top: 1rem; position: relative; }

/* képnézegető */
#lightbox {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: rgba(26, 20, 16, .96); touch-action: pan-y;
}
#lightbox.open { display: flex; }
.lb-img { max-width: calc(100vw - 9rem); max-height: calc(100vh - 6rem); object-fit: contain; user-select: none; }
.lb-prev, .lb-next {
  all: unset; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;
  padding: 1.5rem 1.25rem; font-size: 2.6rem; line-height: 1; color: var(--cream); opacity: .6;
  transition: opacity .2s;
}
.lb-prev { left: .5rem; }
.lb-next { right: .5rem; }
.lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-count {
  position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center;
  font-size: .75rem; letter-spacing: .18em; color: rgba(250,246,240,.5);
}

@media (max-width: 900px) {
  .films-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; }
}
@media (max-width: 600px) {
  .films-grid { grid-template-columns: 1fr; }
  #gallery { padding: 5rem 0; }
  .gallery-header, .gallery-grid { padding: 0 4vw; }
  .gallery-grid, .g-col { gap: 6px; }
  .gallery-preview { max-height: 110vh; }
  .lb-img { max-width: 100vw; max-height: calc(100vh - 7rem); }
  .lb-prev, .lb-next { top: auto; bottom: 0; transform: none; padding: 1rem 1.5rem; }
}