/*
======================================
Event Card
======================================
*/

/* --- Row layout (横並び / デフォルト) --- */
.event-card {
  align-items: flex-start;
  display: flex;
  gap: 32px;
}

.event-card__img {
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  width: 640px;
}

.event-card__img-photo {
  display: block;
  height: auto;
  width: 100%;
}

.event-card__txt {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  min-width: 0;
}

.event-card__title {
  border-left: 4px solid var(--orange-accent);
  padding-left: 16px;
  width: 100%;
}

.event-card__title-text {
  color: var(--white);
  font-family: var(--main-font-family);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1.6px;
  line-height: var(--line-height-tight);
}

.event-card__body {
  color: var(--blue-primary);
  font-family: var(--main-font-family);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

/* --- White variant (青背景用) --- */
.event-card--white .event-card__body {
  color: var(--white);
}

/* --- Column layout (縦並び / 3カラム) --- */
.event-card--column {
  flex-direction: column;
  width: 343px;
}

.event-card--column .event-card__img {
  width: 100%;
}

.event-card--column .event-card__txt {
  width: 100%;
}

.event-card--column .event-card__body {
  width: 100%;
}


/* --- tablet --- */
@media screen and (max-width:1200px) and (min-width:825px) {
  .event-card__img {
    width: calc((100vw / 1240) * 640);
    height: calc((100vw / 1240) * 379);
  }  
}


/* --- SP --- */
@media screen and (max-width: 824px) {
  .event-card {
    flex-direction: column;
    gap: 20px;
  }

  .event-card__img {
    width: 100%;
  }

  .event-card__txt {
    gap: 16px;
    width: 100%;
  }

  .event-card__title-text {
    font-size: var(--font-size-3xl);
  }

  /* column版もSPでは幅いっぱい */
  .event-card--column {
    width: 100%;
  }
}