/* ── "Wish you were here" event postcard ──────────────────────────────────
   Paired with src/shared/havana-postcard.ts's renderEventPostcard(). A
   subtle rattan-cane border (the tile SVG lives at
   public/images/rattan-cane-tile.svg) reads as a postcard/travel keepsake
   without competing with the cover photo inside it. */

.ep-postcard {
  border-radius: 16.2px;
  padding: 10.8px;
  background-image: url('/images/rattan-cane-tile.svg');
  background-size: 16.2px 16.2px;
  box-shadow:
    inset 0 0 0 1.8px #d9c29c,
    0 9px 21.6px rgba(22, 34, 61, 0.08);
}

.ep-postcard-inner {
  background: #fff;
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  /* align-items defaults to stretch -- the writing side and the cover
     image's padded wrapper end up the same height, whichever is taller.
     Neither side sets an explicit height, so the whole card's height
     ultimately follows the cover image's natural aspect ratio. */
}

.ep-side {
  min-width: 0;
}

.ep-side-text {
  width: 360px;
  flex-shrink: 0;
  padding: 27px 28.8px;
  display: flex;
  flex-direction: column;
  gap: 5.4px;
  box-sizing: border-box;
}

/* Vertical dashed rule between the two sides, same technique as a real
   postcard's message/address divider -- a thin repeating gradient rather
   than a literal border-style: dashed, for finer control over dash
   length/gap and color. */
.ep-divider {
  width: 1.8px;
  margin: 18px 0;
  flex-shrink: 0;
  background: repeating-linear-gradient(180deg, #bfd8f3 0 7.2px, transparent 7.2px 12.6px);
}

.ep-side-cover {
  flex: 1;
  padding: 12.6px;
  box-sizing: border-box;
}

.ep-cover-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7.2px;
}

.ep-title {
  font-size: 21.6px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--hb-navy);
}

.ep-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a5670;
  margin: 0;
}

/* Centers the date/venue/"Hope to see you there!" group in whatever
   vertical space is left between the intro text above and the button/
   countdown row below -- margin-top/bottom: auto on a flex column child
   makes it absorb the leftover space evenly on both sides, so the group
   sits centered while the CTA row stays pinned at the very bottom (it no
   longer needs its own margin-top: auto for that -- this group's margins
   already push it down). On the stacked mobile layout, .ep-side-text has
   no extra height beyond its own content, so there's no leftover space to
   distribute and the auto margins collapse to the ordinary flex gap --
   normal spacing, no big gaps, automatically. */
.ep-details-group {
  margin-top: auto;
}

.ep-details {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--hb-navy);
}
.ep-venue-link {
  color: var(--hb-navy);
  text-decoration: underline;
  text-decoration-color: #4da1f0;
  text-underline-offset: 2.7px;
}

.ep-closing {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--hb-blue);
  margin-top: 5.4px;
}

.ep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 12.6px;
}

.ep-cta-form {
  margin: 0;
}

.ep-cta-form button {
  font-size: 12.6px;
  font-weight: 700;
  color: #fff;
  background: var(--hb-blue);
  border: none;
  padding: 9px 16.2px;
  border-radius: 899.1px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ep-cta-form button:hover {
  background: #2679c9;
}

.ep-countdown {
  font-size: 11.7px;
  font-weight: 700;
  color: var(--hb-navy);
  background: #eaf4fd;
  padding: 9px 12.6px;
  border-radius: 899.1px;
  white-space: nowrap;
}
.ep-countdown[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .ep-postcard-inner {
    flex-direction: column;
  }
  .ep-side-text {
    width: auto;
  }
  .ep-divider {
    width: auto;
    height: 1.8px;
    margin: 0 18px;
    background: repeating-linear-gradient(90deg, #bfd8f3 0 7.2px, transparent 7.2px 12.6px);
  }
}

@media (max-width: 480px) {
  .ep-side-text {
    padding: 19.8px 18px;
  }
}