/* ==========================================================================
   COMPONENTS — elemente reutilizabile, independente de secțiune
   ========================================================================== */

/* --- buton ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  min-height: var(--tap);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn--primary {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--acc-fg);
  font-weight: 600;
}

.btn--primary:hover {
  background: var(--acc-hi);
  border-color: var(--acc-hi);
}

.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--bright);
}

.btn--outline:hover {
  border-color: var(--muted);
  background: rgb(242 236 224 / .04);
}

/* --- marcă (logo + wordmark) ---------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand__mark {
  width: 46px;
  height: 43px;
  flex: none;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .06em;   /* capitalele slab sunt late; tracking redus față de Bodoni */
  line-height: 1.1;
  color: var(--bright);
}

.brand__sub {
  display: block;
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--muted);
}

/* --- loc de fotografie ----------------------------------------------------
   Se înlocuiește cu <img> real. Hașura diagonală semnalează un slot gol,
   nu un element de decor.
   ------------------------------------------------------------------------- */

.photo {
  position: relative;
  width: 100%;
  padding: var(--sp-sm);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    135deg,
    rgb(242 236 224 / .02) 0 1px,
    transparent 1px 10px
  );
}

.photo--wide     { aspect-ratio: 3 / 2; }
.photo--tall     { aspect-ratio: 4 / 5; }
.photo--portrait { aspect-ratio: 3 / 4; }

.photo em {
  font-style: normal;
  font-size: var(--fs-micro);
  color: var(--faint);
}

/* --- filtre de galerie ----------------------------------------------------- */

.chip {
  min-height: 44px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.chip:hover {
  color: var(--bright);
  border-color: var(--muted);
}

/* starea activă se citește din contrast, nu din culoare */
.chip[aria-pressed="true"] {
  background: var(--bright);
  border-color: var(--bright);
  color: var(--bg);
  font-weight: 500;
}

/* --- listă de pași --------------------------------------------------------- */

.steps__title { margin-bottom: var(--sp-3xs); font-size: 18px; }

.steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
}

.steps li:first-child { border-top: 1px solid var(--line); }

.steps b {
  flex: none;
  color: var(--acc-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- listă cheie / valoare ------------------------------------------------- */

.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}

.hours li:first-child { border-top: 1px solid var(--line); }
.hours li > span:last-child { color: var(--bright); }
.hours .is-muted { color: var(--muted); }

/* --- bloc de condiții ------------------------------------------------------ */

.notice {
  margin-top: var(--sp-ml);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--bg-raised);
  border-left: 2px solid var(--acc);
  font-size: var(--fs-small);
}

.notice p + p { margin-top: var(--sp-xs); }
.notice b { color: var(--bright); font-weight: 600; }

/* --- casetă de conținut lipsă ---------------------------------------------- */

.placeholder {
  margin-top: var(--sp-md);
  padding: 14px var(--sp-sm);
  border: 1px dashed var(--line);
  font-size: var(--fs-fine);
  color: var(--faint);
}