/* ============================================================================
   AMADO — grid i sekcijski okvir
   ==========================================================================*/

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 60rem) { .grid12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.section { position: relative; padding-block: var(--section); }

.section--light { background: var(--bone); color: var(--on-light); }
.section--dark  { background: var(--forest); color: var(--on-dark); }

/* Zaglavlje sekcije: nadnaslov + naslov, sa hairline linijom koja se iscrtava. */
.section-head { display: flex; flex-direction: column; gap: var(--sp-4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  color: currentColor; opacity: .78;
}
.eyebrow::before {
  content: ""; inline-size: clamp(1.5rem, 4vw, 3.5rem); block-size: 1px;
  background: currentColor; opacity: .55;
  transform-origin: left; transform: scaleX(var(--rule, 1));
  transition: transform var(--dur-4) var(--ease) 120ms;
}

/* --- Slike ---------------------------------------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--forest-soft) center / cover no-repeat;
  background-image: var(--lqip);
}
.frame picture { display: block; block-size: 100%; }
.frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Slika ulazi otkrivanjem maske umjesto običnog fade-a. */
.frame img {
  clip-path: inset(0 0 var(--reveal, 0%) 0);
  transform: scale(var(--reveal-scale, 1));
  transition: clip-path var(--dur-4) var(--ease), transform 1.5s var(--ease);
}

/* Slike koje se koriste kao pozadina sekcije nemaju .frame omotač. */
.hero__media picture, .wine__bg picture, .door picture { display: block; block-size: 100%; }