/* ==========================================================================
   pages/keretek.css - "Keretek és márkák" oldal specifikus szabályok
   ========================================================================== */

/* -- Keret-forma kártyák (valós fotókkal) ----------------------------------- */
.frame-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); }

.frame-style-card {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 2608 / 1632;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.frame-style-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.frame-style-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.frame-style-card__btn {
  position: absolute;
  left: 8%;
  bottom: 12%;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(22, 26, 46, 0.3);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.frame-style-card:hover .frame-style-card__btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

@media (max-width: 640px) {
  .frame-style-grid { grid-template-columns: 1fr; }
}

/* -- Keret-forma modal ("Felfedezem" kártyákról nyílik, lásd frame-modal.js)
   Az általános modal-váz (.frame-modal, backdrop, panel alap, close gomb,
   actions) a components.css-ben van - itt csak a kép+szöveg két hasábos
   elrendezés és a nyilak jönnek, amik csak ezen az oldalon kellenek. */

.frame-modal__panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  max-height: 88dvh;
}

/* A kép a valós fotó arányát (2608:1632) kapja, NEM egy rögzített
   panel-magasságot - így minden formánál pontosan ugyanakkora (nincs
   ugrálás forma-váltáskor), és nem torzul/zoomol be, mert a doboz aránya
   mindig megegyezik a fotó arányával. */
.frame-modal__media { position: relative; overflow: hidden; background: var(--ink-raised); aspect-ratio: 2608 / 1632; align-self: start; }
.frame-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.frame-modal__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.frame-modal__content p { margin-bottom: var(--space-lg); }

/* A nyilak a fotón belül, ráhelyezve ülnek (nem a kártya szélén kívül) -
   a panelen lévő overflow:hidden (a lekerekített sarkokhoz kell) egyébként
   levágná őket, ha a kártya szélén kívülre lógnának. */
.frame-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.frame-modal__nav:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.frame-modal__nav--prev { left: 0.85rem; }
.frame-modal__nav--next { right: 0.85rem; }

@media (max-width: 760px) {
  /* Mobilon a kép a szöveg fölé kerül (nem mellé) - itt a "ne ugráljon"
     rögzített magasság helyett hagyjuk, hogy a tartalommal nőjön, felső
     korláttal és görgetéssel, mert egymás alatt már nem gond a jitter. */
  .frame-modal__panel { grid-template-columns: 1fr; height: auto; max-height: 92dvh; overflow-y: auto; }
  .frame-modal__media { aspect-ratio: 4 / 3; }
}