/* =========================================================
   Event pages styles
   Used by:
   - /event/index.html (list)
   - /event/*.html     (detail)
   ========================================================= */

/* =========================================================
   Variables (event-only)
   ========================================================= */

:root {
  --event-accent: #876d4a;
  --event-label-bg: #7b6155;
  --event-cell-bg: #faf1f3;

  --event-detail-title-gap: 16px;  /* title -> flyers */
  --event-detail-info-gap: 20px;   /* flyers -> info */

  --event-list-gap-top: 14px;      /* section title -> first item */
  --event-list-item-gap: 18px;     /* list item spacing (PC) */
  --event-list-item-gap-sp: 26px;  /* list item spacing (SP) */
}

/* =========================================================
   Minor helpers (event-only)
   ========================================================= */

/* index.html uses .ml5 but common_v25.css doesn't define it */
.ml5 { margin-left: 5px; }

/* =========================================================
   Event detail: flyers (PC fixed / mobile stacked)
   ========================================================= */

/* Space between title bar and flyers */
.box_mds + .box_eve {
  margin-top: var(--event-detail-title-gap);
}

/* PC: always 2 columns (keeps size even if only 1 flyer) */
.box_eve {
  display: grid;
  grid-template-columns: 365px 365px;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.box_eve1 { margin: 0; }

.box_eve1 img {
  display: block;
  width: 363px;
  height: 513px;
  border: 1px solid var(--event-accent);
}


/* =========================================================
   Event detail: info blocks (label / value)
   ========================================================= */

.box_eve_d {
  display: grid;
  grid-template-columns: 176px 558px;
  gap: 6px;
  margin: 0;
  margin-top: var(--event-detail-info-gap);
  padding: 0;
}

.box_eve_d1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* label (日時・会場・出演 etc.) */
.kakomi1 {
  width: 160px;
  margin: 0 auto;
  padding: 10px 8px;
  color: #fff;
  background-color: var(--event-label-bg);
  border-radius: 3px;

  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* value */
.box_eve_d2 {
  padding: 8px;
  background-color: var(--event-cell-bg);
  border-radius: 3px;

  line-height: 1.75;

  /* safety for long URLs / emails */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.box_eve_d2 a {
  line-height: 1.6;
}

/* =========================================================
   Event list: item row (thumbnail + text)
   ========================================================= */

.box_eve_top {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 20px;
  margin: 0 0 var(--event-list-item-gap) 0;
  padding: 0;
}

.box_eve_t1 { margin: 0; }

.box_eve_t1 img {
  display: block;
  width: 165px;
  height: 226px;
  border: 1px solid var(--event-accent);
}

.box_eve_t2 {
  margin-top: 10px;
  line-height: 1.7;
}

/* Emphasize area + date without touching HTML */
.box_eve_t2::first-line {
  font-weight: 500;
}

/* Title block spacing */
.box_eve_t2 a {
  display: inline-block;
  margin-top: 4px;
  line-height: 1.6;
  font-weight: 500;
}

/* Space above the first item of each section (PC) */
.box_mds#concert + .box_eve_top,
.box_mds#fair + .box_eve_top,
.box_mds#festival + .box_eve_top,
.box_mds#competition + .box_eve_top {
  margin-top: var(--event-list-gap-top) !important;
}

/* =========================================================
   Share buttons (event pages only)
   ========================================================= */

/* PC: keep common_v25.css layout */
.sharebutton_clm {}

/* =========================================================
   Mobile overrides
   ========================================================= */

@media screen and (max-width: 768px) {

  /* Flyers: always single column on mobile */
  .box_eve {
    grid-template-columns: 1fr;
  }

  /* safer override */
  .box_eve .box_eve1 img {
    width: 100%;
    height: auto;
    max-width: none;
  }

  /* Info blocks: stacked */
  .box_eve_d {
    grid-template-columns: 1fr;
    margin-top: 24px;
    row-gap: 10px;
  }

  .box_eve_d1 {
    justify-content: flex-start;
  }

  .kakomi1 {
    width: auto;
    margin: 0;
  }

  /* Event list: stack thumbnail and text */
  .box_eve_top {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: var(--event-list-item-gap-sp);
  }

  .box_eve_t1 img {
    width: 100%;
    height: auto;
  }

  .box_eve_t2 {
    margin-top: 0;
    line-height: 1.8;
  }

  .box_eve_t2 a {
    margin-top: 6px;
    line-height: 1.6;
  }

  /* Share buttons: vertical */
  .sharebutton_clm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
  }

  .sharebutton iframe {
    max-width: 100%;
  }

  /* reduce bottom whitespace before footer (event pages only) */
  .sharebutton_clm + .top30 {
    height: 0;
  }
}