/**
 * VINOS timeline
 * Every style is scoped to the .vinos-timeline root element, so the block
 * can be dropped into any page without touching the rest of the layout.
 *
 * Structure of one entry: headline, text, image.
 * The salmon box behind the photos is part of the PNG, not of the CSS.
 *
 * The brand fonts (BlackerPro, Olga, Averta) have to be loaded by the page.
 */

/* ---------------------------------------------------------
   Block root – all custom properties live here, not on :root,
   so they cannot collide with the host page.
   --------------------------------------------------------- */
.vinos-timeline{
  --vinos-timeline-bg:          #f3eadd;  /* --c-sand60: warm paper background */
  --vinos-timeline-ink:         #1d1a18;  /* --c-black50: headlines, body text, rules */
  --vinos-timeline-orange:      #f86729;  /* --c-orange50: accent colour and dots */

  --vinos-timeline-column:      480px;    /* image width on desktop */
  --vinos-timeline-rule-gap:    20px;     /* column edge to the centre rule */
  --vinos-timeline-maxw:        1080px;   /* 2 x 480 + 2 x 20 + 2 x 40 padding */
  --vinos-timeline-space:       20px;     /* paddings, mobile and tablet */
  --vinos-timeline-gap:         40px;     /* below each entry, all breakpoints */
  --vinos-timeline-offset:      clamp(70px, 9vw, 150px); /* head start of the right column */
  --vinos-timeline-underline:    8px;     /* headline to underline */
  --vinos-timeline-title-gap:    6px;     /* pointer to text */
  --vinos-timeline-inner-gap:   12px;     /* text to image */

  /* Speech bubble pointer of the underline. The path enters and leaves
     horizontally at y=1, so the two line segments join it seamlessly.
     Same drawing as ./zeitstrahl-linie.svg, inlined to save a request. */
  --vinos-timeline-pointer: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24'><path fill='none' stroke='%231d1a18' stroke-width='1' d='m0,0.5l4,0c13.33,6.46 24.29,13.54 37.63,20l-7.13,-20l9.5,0'/></svg>");
  /* Arrow head that closes the top of the centre rule. Flip the path to
     M1 1 L7.5 8.6 L14 1 if it should point down instead. */
  --vinos-timeline-arrow: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10'><path d='M1 9 L7.5 1.4 L14 9' fill='none' stroke='%231d1a18' stroke-width='1' stroke-linecap='round' stroke-linejoin='miter'/></svg>");
  --vinos-timeline-pointer-width: 44px;
  --vinos-timeline-pointer-inset: 110px;  /* distance pointer to centre rule */

  --vinos-timeline-font-headline: BlackerPro, Georgia, "Times New Roman", serif;
  --vinos-timeline-font-script:   Olga, "Segoe Script", sans-serif;
  --vinos-timeline-font-body:     Averta, "Helvetica Neue", Arial, sans-serif;

  /* explicit base values so nothing is inherited from the host page */
  position:relative;
  display:block;
  margin:0;
  padding:0;
  background:var(--vinos-timeline-bg);
  color:var(--vinos-timeline-ink);
  font-family:var(--vinos-timeline-font-body);
  font-size:16px;
  font-weight:400;
  font-style:normal;
  line-height:1.5;
  text-align:left;
  letter-spacing:.03em;
  text-transform:none;
  -webkit-font-smoothing:antialiased;
}

/* local box-sizing reset, limited to the block */
.vinos-timeline,
.vinos-timeline *,
.vinos-timeline *::before,
.vinos-timeline *::after{
  box-sizing:border-box;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.vinos-timeline__header{
  max-width:var(--vinos-timeline-maxw);
  margin:0 auto;
  /* same 40px above and below as between the entries */
  padding:var(--vinos-timeline-space) var(--vinos-timeline-space) 24px;
  text-align:center;
}
@media (min-width: 1200px){
  .vinos-timeline__header{ padding:var(--vinos-timeline-space) var(--vinos-timeline-space) 32px; }
}
.vinos-timeline__headline{
  margin:0;
  font-family:var(--vinos-timeline-font-headline);
  font-weight:700;
  font-size:28px;
  line-height:1.05;
  letter-spacing:.03em;
  color:var(--vinos-timeline-orange);
  text-transform:uppercase;
}
@media (min-width: 768px){
  .vinos-timeline__headline{ font-size:34px; }
}
@media (min-width: 1200px){
  .vinos-timeline__headline{ font-size:45px; }
}

/* ---------------------------------------------------------
   Track – the vertical rule sits at 50% on desktop
   --------------------------------------------------------- */
.vinos-timeline__track{
  position:relative;
  max-width:var(--vinos-timeline-maxw);
  margin:0 auto;
  padding:0 var(--vinos-timeline-space) calc(var(--vinos-timeline-space) * 2);
}
.vinos-timeline__track::before{
  content:"";
  position:absolute;
  top:0;
  bottom:calc(var(--vinos-timeline-space) * 2);
  left:50%;
  width:1px;
  margin-left:-0.5px;
  background:var(--vinos-timeline-ink);
}

/* Arrow head on top of the rule. Own element rather than a background layer
   of the rule, so its 15px box is centred on 50% the same way the 1px line
   and the 9px dots are - one rounding for all three. */
.vinos-timeline__arrow{
  position:absolute;
  top:0;
  left:50%;
  width:15px;
  height:10px;
  margin-left:-7.5px;
  background:var(--vinos-timeline-arrow) center top / 15px 10px no-repeat;
}

/* ---------------------------------------------------------
   Entries – headline, text, image
   --------------------------------------------------------- */
.vinos-timeline__entry{
  position:relative;
  width:calc(50% - var(--vinos-timeline-rule-gap));
  margin-bottom:var(--vinos-timeline-gap);
}
.vinos-timeline__entry:last-child{ margin-bottom:0; }

.vinos-timeline__entry--left{  margin-right:auto; }
.vinos-timeline__entry--right{ margin-left:auto; }

/* ---------------------------------------------------------
   Entry headline
   The underline runs from the headline to the centre rule and
   carries the speech bubble pointer, exactly as in the artwork:
   ::after draws rule + pointer, ::before is the dot on the rule.
   --------------------------------------------------------- */
.vinos-timeline__title{
  position:relative;
  display:block;
  /* only as wide as the headline itself, but long enough to carry the
     pointer: underline length is title width plus the gap to the rule */
  width:fit-content;
  max-width:100%;
  min-width:calc(var(--vinos-timeline-pointer-inset)
  + var(--vinos-timeline-pointer-width)
  + 30px
  - var(--vinos-timeline-rule-gap));
  /* 22px is how deep the pointer hangs below the line */
  margin:0 0 calc(var(--vinos-timeline-underline) + 22px + var(--vinos-timeline-title-gap));
  font-family:var(--vinos-timeline-font-headline);
  font-weight:700;
  font-size:24px;              /* desktop values are set in the media query */
  line-height:1.1;
  color:var(--vinos-timeline-ink);
}
@media (min-width: 768px){
  .vinos-timeline__title{ font-size:28px; }
}
@media (min-width: 1200px ){
  .vinos-timeline__title{ font-size:34px; }
}

/* the year inside a headline is one step larger than the rest */
.vinos-timeline__year{
  font-size:28px;
  line-height:1;
}
@media (min-width: 768px){
  .vinos-timeline__year{ font-size:34px; }
}
@media (min-width: 1200px ){
  .vinos-timeline__year{ font-size:45px; }
}

/* Underline: left segment, pointer, right segment.
   The two segments stop exactly at the pointer, so the line dips into the
   notch instead of running straight through it. */
.vinos-timeline__title::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:calc(-1 * var(--vinos-timeline-rule-gap));
  height:24px;
  margin-top:var(--vinos-timeline-underline);
  background-image:var(--vinos-timeline-pointer),
  linear-gradient(var(--vinos-timeline-ink), var(--vinos-timeline-ink)),
  linear-gradient(var(--vinos-timeline-ink), var(--vinos-timeline-ink));
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-position:right var(--vinos-timeline-pointer-inset) top,
  left top,
  right top;
  background-size:var(--vinos-timeline-pointer-width) 24px,
  calc(100% - var(--vinos-timeline-pointer-inset) - var(--vinos-timeline-pointer-width)) 1px,
  var(--vinos-timeline-pointer-inset) 1px;
}

/* the dot where the underline meets the centre rule */
.vinos-timeline__title::before{
  content:"";
  position:absolute;
  top:calc(100% + var(--vinos-timeline-underline) - 4px);
  right:calc(-1 * var(--vinos-timeline-rule-gap) - 4.5px);
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--vinos-timeline-orange);
  z-index:1;
}

/* left column: the headline sits against the centre rule */
.vinos-timeline__entry--left .vinos-timeline__title{
  margin-left:auto;
  text-align:right;
}

/* right column: the underline runs to the left, pointer mirrored */
.vinos-timeline__entry--right .vinos-timeline__title::after{
  left:calc(-1 * var(--vinos-timeline-rule-gap));
  right:0;
  transform:scaleX(-1);
}
.vinos-timeline__entry--right .vinos-timeline__title::before{
  left:calc(-1 * var(--vinos-timeline-rule-gap) - 4.5px);
  right:auto;
}

/* optional accent variant of the headline */
.vinos-timeline__title--orange{ color:var(--vinos-timeline-orange); }

/* ---------------------------------------------------------
   Entry text
   --------------------------------------------------------- */
.vinos-timeline__text{
  margin:0;
  max-width:46ch;
  font-family:var(--vinos-timeline-font-body);
  font-size:13px;
  font-weight:400;
  line-height:1.3;
}
/* these two breakpoints follow the site wide type scale,
   not the 821px the two column layout switches at */
@media (min-width: 768px){
  .vinos-timeline__text{ font-size:15px; }
}
@media (min-width: 1200px ){
  .vinos-timeline__text{ font-size:17px; }
}
.vinos-timeline__text + .vinos-timeline__text{ margin-top:.7em; }

/* ---------------------------------------------------------
   Entry image – the PNG already contains the salmon box
   --------------------------------------------------------- */
.vinos-timeline__figure{
  display:block;
  margin:var(--vinos-timeline-inner-gap) 0 0;
}
.vinos-timeline__picture{
  display:block;
}
.vinos-timeline__image{
  display:block;
  width:100%;
  max-width:var(--vinos-timeline-column);
  height:auto;
}

/* ---------------------------------------------------------
   Scroll reveal – fade in and rise from below.
   The hidden start state is bound to .vinos-timeline-js, a class the
   script puts on <html> while it parses. Without JavaScript the class
   never appears and the content stays visible, for readers and crawlers.
   --------------------------------------------------------- */
.vinos-timeline-js .vinos-timeline__reveal{
  opacity:0;
  transform:translateY(46px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
  transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.vinos-timeline-js .vinos-timeline__reveal--visible{
  opacity:1;
  transform:none;
}
/* shown at load: no transition, the block is simply there */
.vinos-timeline-js .vinos-timeline__reveal--instant{
  transition:none;
}

/* stagger the three parts of one entry */
.vinos-timeline__entry > .vinos-timeline__reveal:nth-child(1){ transition-delay:0ms; }
.vinos-timeline__entry > .vinos-timeline__reveal:nth-child(2){ transition-delay:110ms; }
.vinos-timeline__entry > .vinos-timeline__reveal:nth-child(3){ transition-delay:220ms; }
.vinos-timeline__entry > .vinos-timeline__reveal:nth-child(4){ transition-delay:330ms; }

@media (prefers-reduced-motion: reduce){
  .vinos-timeline-js .vinos-timeline__reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ---------------------------------------------------------
   Mobile: single column, rule moves to the left edge, every
   underline runs to the left like the right column does.
   --------------------------------------------------------- */
@media (max-width: 820px){
  .vinos-timeline{
    --vinos-timeline-rule-gap:24px;   /* 44px padding minus the 20px rule position */
    --vinos-timeline-pointer-inset:70px;
  }

  .vinos-timeline__track{ padding-left:44px; padding-right:var(--vinos-timeline-space); }
  .vinos-timeline__track::before{ left:20px; margin-left:-0.5px; }
  .vinos-timeline__arrow{ left:20px; margin-left:-7.5px; }

  .vinos-timeline__entry,
  .vinos-timeline__entry--left,
  .vinos-timeline__entry--right{
    width:100%;
    margin-left:0;
    margin-right:0;
  }

  .vinos-timeline__entry--left .vinos-timeline__title{
    margin-left:0;
    text-align:left;
  }

  .vinos-timeline__title::after{
    left:calc(-1 * var(--vinos-timeline-rule-gap));
    right:0;
    transform:scaleX(-1);
  }
  .vinos-timeline__title::before{
    left:calc(-1 * var(--vinos-timeline-rule-gap) - 4.5px);
    right:auto;
  }

  .vinos-timeline__text{ max-width:none; }
}

/* ---------------------------------------------------------
   Desktop: both sides float, so each column keeps its own
   flow. A short entry on the left no longer holds back the
   next entry on the right – the two columns interlock.
   Placed after the mobile query on purpose, so the min-width
   condition is the only thing that switches it on.
   --------------------------------------------------------- */
@media (min-width: 821px){
  .vinos-timeline{
    --vinos-timeline-space:40px;
  }

  /* the track has to contain its floated children */
  .vinos-timeline__track::after{
    content:"";
    display:block;
    clear:both;
  }

  .vinos-timeline__entry--left{
    float:left;
    clear:left;
    margin-right:0;
  }
  .vinos-timeline__entry--right{
    float:right;
    clear:right;
    margin-left:0;
  }

  /* the first entry of the right column starts lower down */
  .vinos-timeline__track > .vinos-timeline__entry--right:nth-of-type(2){
    margin-top:var(--vinos-timeline-offset);
  }
}