/* ============================================================
   Deutsch Timeline – scoped styles
   All rules prefixed with .wvc-dt-root to avoid clashing
   with the WordPress theme.

   Pixel values are taken directly from the original Tailwind
   classes in components/timeline.tsx:
     h-56       = 14rem = 224px   (row height desktop)
     h-48       = 12rem = 192px   (image height mobile)
     gap-2      = 0.5rem = 8px
     gap-[5px]  = 5px
     px-2/px-4  = 8px / 16px
     pl-4/pr-10 = 16px / 40px
     pl-3/pr-14 = 12px / 56px
     py-4/py-6  = 16px / 24px
     text-4xl   = 2.25rem
     text-6xl   = 3.75rem
     text-7xl   = 4.5rem
     text-sm    = 0.875rem
     mb-2       = 0.5rem = 8px
   ============================================================ */

.wvc-dt-root *,
.wvc-dt-root *::before,
.wvc-dt-root *::after {
  box-sizing: border-box;
}

/* ── Outer wrapper ── */
.wvc-dt-root .wvc-dt-wrap {
  width:      100%;
  max-width:  1000px;
  margin:     0 auto;
  padding:    0 8px;           /* px-2 */
}

@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-wrap {
    padding: 0 16px;           /* px-4 */
  }
}

/* ── Grid ── */
.wvc-dt-root .wvc-dt-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   8px;  /* gap-2 */
}

@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-grid {
    grid-template-columns: 1fr 1fr;
    column-gap:            5px;  /* gap-x-[5px] */
    row-gap:               5px;  /* gap-y-[5px] */
  }
}

/* ── Row (flex container) ── */
.wvc-dt-root .wvc-dt-row {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  height:         auto;
}

@media (min-width: 769px) {
  .wvc-dt-root .wvc-dt-row {
    flex-direction: row;
    gap:            5px;
    height:         285px;       /* h-56 = 14rem */
  }
}

/* Full-width row (spans both grid columns) */
@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-row--full {
    grid-column: span 2;
  }
}

/* ── Text block (coloured card) ── */
.wvc-dt-root .wvc-dt-text {
  color:           #fff;
  /* mobile: pl-4 pr-4, py-4 */
  padding:         16px 16px 16px 16px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;
  width:           100%;
  min-width:       0;
  overflow:        hidden;
  cursor:          pointer;
  transition:      transform 0.3s, box-shadow 0.3s;
}

.wvc-dt-root .wvc-dt-text:hover {
  transform:  scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),
              0 10px 10px -5px rgba(0,0,0,.04);
  /* hover:shadow-xl */
}

/* Mobile overflow-visible: used on 2004 so the inner
   -30px offset doesn't clip the content on small screens */
.wvc-dt-root .wvc-dt-text--ov-mobile {
  overflow: visible;
}

/* Desktop: standard padding pl-4 pr-10, py-6 */
@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-text {
    padding: 24px 40px 24px 16px;  /* pl-4 pr-10 py-6 */
    overflow: hidden;
  }
  /* Restore hidden on 2004's special block */
  .wvc-dt-root .wvc-dt-text--ov-mobile {
    overflow: hidden;
  }
}

/* Alternative padding: pl-3 pr-14 (2019 & 2021) */
@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-text--pl3pr14 {
    padding-left:  12px;   /* pl-3 */
    padding-right: 56px;   /* pr-14 */
  }
}

/* ── Inner wrapper (2004 only) – shifts content -30px on desktop ── */
.wvc-dt-root .wvc-dt-inner {
  width: 100%;
}

@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-inner--offset {
    margin-top: -30px;   /* md:-mt-[30px] */
  }
}

/* ── Year number ── */
.wvc-dt-root .wvc-dt-year {
  /* mobile: text-4xl */
  color: #fff;
  font-size:   2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;   /* mb-2 */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* text-6xl on desktop */
@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-year--6xl {
    font-size:   3.75rem;
    line-height: 1;
  }
}

/* text-7xl on desktop */
@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-year--7xl {
    font-size:   4.5rem;
    line-height: 1;
  }
}

/* ── Description text ── */
.wvc-dt-root .wvc-dt-desc {
  font-size:      0.875rem;   /* text-sm */
  font-weight:    500;        /* font-medium */
  line-height:    1.5;        /* leading-normal */
  word-break:     break-word;
  overflow-wrap:  break-word;
  margin:         0;
  font-family:    'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-desc            { line-height: 1.25; }   /* leading-tight */
  .wvc-dt-root .wvc-dt-desc--xs        { font-size: 0.75rem; }  /* text-xs  (EN 2013) */
  .wvc-dt-root .wvc-dt-desc--base      { font-size: 1rem;    }  /* text-base (EN 2004) */
}

/* ── Image block ── */
.wvc-dt-root .wvc-dt-img {
  width:      100%;
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
  height:     192px;          /* h-48 on mobile */
  flex-shrink: 0;
  transition: transform 0.3s, box-shadow 0.3s;
}

.wvc-dt-root .wvc-dt-img:hover {
  transform:  scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),
              0 10px 10px -5px rgba(0,0,0,.04);
}

@media (min-width: 768px) {
  .wvc-dt-root .wvc-dt-img {
    height: 100%;              /* fills the row's fixed 224 px */
  }
}

.wvc-dt-root .wvc-dt-img img {
  width:      100%!important;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── Desktop widths ──
   On mobile every block is full-width (100%).
   On desktop the widths below match the exact Tailwind/calc()
   values from the original timeline.tsx. */

@media (min-width: 768px) {

  /* w-2/5 = 40% */
  .wvc-dt-root .wvc-dt-text--2of5 { width: 40%; }
  /* w-1/5 = 20% */
  .wvc-dt-root .wvc-dt-text--1of5 { width: 20%; }
  /* calc(40%+20px) */
  .wvc-dt-root .wvc-dt-text--40p20 { width: calc(40% + 20px); }
  /* calc(20%+50px) */
  .wvc-dt-root .wvc-dt-text--20p50 { width: calc(20% + 50px); }

  /* w-3/5 = 60% */
  .wvc-dt-root .wvc-dt-img--3of5 { width: 60%; }
  /* w-2/5 = 40% */
  .wvc-dt-root .wvc-dt-img--2of5 { width: 40%; }
  /* calc(60%-20px) */
  .wvc-dt-root .wvc-dt-img--60m20 { width: calc(60% - 20px); }
  /* calc(30%-50px) */
  .wvc-dt-root .wvc-dt-img--30m50 { width: calc(30% - 50px); }
}