/* components.css – מסגור תמונות, אבן, תג, צ'יפ */

/* ---------- אבן ותג ---------- */
.stone { display: inline-block; flex: none; width: 22px; height: 16px; border-radius: 5px; background: var(--stone-olive); }
.stone--turquoise { background: var(--stone-turquoise); }
.stone--olive { background: var(--stone-olive); }
.stone--orange { background: var(--stone-orange); }
.stone--sand { background: var(--stone-sand); }
.tag { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }

/* ---------- מסגרת ---------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  --art-sky: var(--sky);
  --art-1: #DCCB9E;
  --art-2: #9DB45A;
  --art-3: var(--ink);
}
.frame--olive { --art-sky: #E8EFE3; --art-1: #A9BC93; --art-2: #6F8E5A; --art-3: #2F4A31; }
.frame--turquoise { --art-sky: #E2F2F3; --art-1: #8FD3D8; --art-2: var(--stone-turquoise); --art-3: var(--stone-teal); }
.frame--orange { --art-sky: #FBEBDD; --art-1: #F5D3B0; --art-2: var(--stone-orange); --art-3: #8A4A12; }
.frame--sand { --art-sky: var(--sky); --art-1: #EAD9B8; --art-2: var(--stone-sand); --art-3: #6B4E1E; }

.frame__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* מקום שמור לצילום: נוף שטוח בצבעי הקטגוריה */
.frame__art {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 68% 34%, var(--sun) 0 9%, transparent 9.2%),
    linear-gradient(to bottom, var(--art-sky) 0 52%, var(--art-1) 52% 64%, var(--art-2) 64% 80%, var(--art-3) 80% 100%);
}
.frame__label {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  background: var(--ground);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- חלופה א: פסיפס חי ---------- */
.frame--mosaic {
  container-type: size;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: var(--gap);
  background: transparent;
}
.mosaic__tile { position: relative; overflow: hidden; }
.mosaic__tile > .frame__img,
.mosaic__tile > .frame__art {
  position: absolute;
  max-width: none;
  width: 100cqw;
  height: 100cqh;
  /* RTL: עמודה 0 היא הימנית, לכן ההיסט לוגי */
  inset-inline-start: calc(var(--c) * -1 * ((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) + var(--gap)));
  top: calc(var(--r) * -1 * ((100cqh - (var(--rows) - 1) * var(--gap)) / var(--rows) + var(--gap)));
}

/* ---------- חלופה ב: שכבות סלע ---------- */
.frame--strata {
  container-type: size;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.strata__band { position: relative; flex: none; height: calc(var(--h) * 1%); overflow: hidden; }
.strata__band > .frame__img,
.strata__band > .frame__art {
  position: absolute;
  max-width: none;
  width: 100cqw;
  height: 100cqh;
  left: 0;
  top: calc(var(--y) * -1cqh);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .strata__band {
      animation: tn-strata linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}
@keyframes tn-strata { from { transform: translateX(var(--x)); } to { transform: none; } }

/* ---------- צ'יפ בחיפוש כמשפט ---------- */
.chip { position: relative; display: inline-block; border-bottom: 5px solid var(--chip, var(--stone-olive)); }
.chip--olive { --chip: var(--stone-olive); }
.chip--sand { --chip: var(--stone-sand); }
.chip--orange { --chip: var(--stone-orange); }
.chip--turquoise { --chip: var(--stone-turquoise); }
.chip select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--tap);
  padding-block: 0;
  padding-inline: 6px 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.chip::after {
  content: "▾";
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .55em;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { background: var(--ink); color: var(--ground); }
}
.chip, .chip select { transition: background-color .16s var(--ease-out), color .16s var(--ease-out); }