/* ============================================================
   TERRE ALTE APS — Palette Frame
   Aggiunge una cornice decorativa con strisce verticali
   in alto e in basso alle immagini con classe .palette-frame
   ============================================================ */

:root {
  --pf-height: clamp(22px, 4vw, 48px);
  --pf-stripe-span: 32%;
  --pf-teal: #0d6b73;
  --pf-olive: #9b8c5c;

  /* Pattern di strisce verticali — toni terrosi + teal */
  --pf-stripes: linear-gradient(
    90deg,
    #0d6b73   0.0%   3.0%,   /* teal */
    #a59464   3.0%   5.5%,   /* oliva scuro */
    #7a5a28   5.5%   7.8%,   /* marrone cioccolato */
    #d49430   7.8%  11.0%,   /* ambra */
    #eadcc0  11.0%  14.0%,   /* crema */
    #f5f0e6  14.0%  16.5%,   /* avorio */
    #c8852c  16.5%  19.5%,   /* ocra dorato */
    #f0e4cc  19.5%  22.0%,   /* beige chiaro */
    #8b6420  22.0%  24.2%,   /* marrone dorato */
    #ece0c8  24.2%  27.0%,   /* crema caldo */
    #0d6b73  27.0%  30.0%,   /* teal */
    #f0e5ce  30.0%  33.5%,   /* beige */
    #cc9035  33.5%  36.5%,   /* oro antico */
    #f7f2e8  36.5%  39.5%,   /* panna */
    #d4a450  39.5%  42.5%,   /* miele */
    #e8d5b2  42.5%  46.0%,   /* sabbia */
    #0f6a72  46.0%  49.0%,   /* teal */
    #f0e3cb  49.0%  52.5%,   /* crema rosa */
    #b87a24  52.5%  55.5%,   /* ambra scuro */
    #f5efe3  55.5%  59.0%,   /* bianco caldo */
    #d0a055  59.0%  62.5%,   /* oro */
    #ebd8b8  62.5%  66.5%,   /* beige dorato */
    #0b646d  66.5%  70.0%,   /* teal scuro */
    #b5c4b0  70.0%  74.5%,   /* salvia */
    #e9d5b5  74.5%  79.0%,   /* camoscio */
    #bf8b3f  79.0%  83.0%,   /* bronzo */
    #f3ede0  83.0%  88.0%,   /* gesso */
    #c49040  88.0%  92.0%,   /* caramello */
    #e5d4b0  92.0%  96.0%,   /* pergamena */
    #0d6b73  96.0% 100.0%    /* teal */
  );
}

/* --- Wrapper ------------------------------------------------ */
.palette-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* --- Barre decorative (top & bottom) ------------------------ */
.palette-frame::before,
.palette-frame::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--pf-height);
  background-image: var(--pf-stripes);
  background-repeat: no-repeat;
  background-size: var(--pf-stripe-span) 100%;
}

/* Top: strisce a sinistra, sfondo teal */
.palette-frame::before {
  background-color: var(--pf-teal);
  background-position: left center;
}

/* Bottom: strisce a sinistra, sfondo oliva */
.palette-frame::after {
  background-color: var(--pf-olive);
  background-position: left center;
}

/* --- Immagine interna --------------------------------------- */
.palette-frame img {
  display: block;
  width: 100%;
  height: auto;
}