/**
 * @file
 * The Event page -- node--events.html.twig.
 *
 * Loaded on a full event node only, from
 * drupal8_zymphonies_theme_event_page_preprocess().
 *
 * The three resource buttons and their popup are NOT styled here. They are the
 * same component as on the listing card and are styled once, in
 * event-actions.css, which this page attaches alongside this file.
 *
 * The palette is the listing's: green for the site, orange for Agenda, blue
 * for the gallery. Named once here and used by reference so the page and the
 * cards cannot drift apart.
 */

.event-page {
  --ep-green: #1b6b3a;
  --ep-green-dark: #14512e;
  --ep-orange: #c96b1c;
  --ep-ink: #22282b;
  --ep-muted: #5e6b66;
  --ep-line: #e3e7e2;
  --ep-panel: #f6f8f5;

  max-width: 100%;
  margin: 0 0 30px;
  color: var(--ep-ink);
  font-size: 15px;
  line-height: 1.7;
}

/* =========================================
   HERO
========================================= */

.event-page__hero {
  padding: 0 0 18px;
  margin-bottom: 24px;
  border-bottom: 3px solid var(--ep-line);
}

.event-page__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.event-page__badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 40px;
  background: var(--ep-green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* Category and status are different kinds of fact, so they are told apart the
   same way the listing badges are: by colour, not by position. */
.event-page__badge--type {
  background: var(--ep-orange);
}

.event-page__title {
  margin: 0;
  color: var(--ep-green-dark);
  /* Scales with the viewport instead of stepping at breakpoints, so a long
     meeting title never collides with the sidebar on a narrow laptop. */
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.25;
}

.event-page__date {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  color: var(--ep-muted);
  font-size: 15px;
  font-weight: 600;
}

.event-page__date .fa {
  color: var(--ep-orange);
}

/* The date field prints its own wrapper; it must not add a second line break
   or a stray margin inside a flex row. */
.event-page__date .field,
.event-page__date .field__item,
.event-page__date time {
  display: inline;
  margin: 0;
}

/* =========================================
   LAYOUT

   Two columns on a wide screen, one on a narrow one. The old page floated a
   30% left rail and left the grid half-declared, so the two halves overlapped
   at most widths; this is a plain grid that collapses on its own.
========================================= */

.event-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

.event-page__main {
  min-width: 0;
}

.event-page__aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 900px) {

  .event-page__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  /* Resources and attachments come first on a phone: they are what a visitor
     opening an event on a small screen is usually after. */
  .event-page__aside {
    order: -1;
  }

}

/* =========================================
   IMAGE AND BODY
========================================= */

.event-page__figure {
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid var(--ep-line);
  border-radius: 10px;
  background: #fff;
}

.event-page__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.event-page__body {
  margin-bottom: 26px;
  text-align: justify;
}

.event-page__body p:last-child {
  margin-bottom: 0;
}

.event-page__body img {
  max-width: 100%;
  height: auto;
}

/* An editor's pasted table must scroll rather than push the page sideways. */
.event-page__body table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* =========================================
   SECTION HEADINGS
========================================= */

.event-page__section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ep-line);
  color: var(--ep-green-dark);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.event-page__section-title .fa {
  color: var(--ep-orange);
  font-size: 15px;
}

/* =========================================
   PANELS (resources, attachments)
========================================= */

.event-page__panel {
  padding: 18px;
  border: 1px solid var(--ep-line);
  border-radius: 10px;
  background: var(--ep-panel);
}

/* Stacked, not in a row: the side column is too narrow for three pills side by
   side, and event-actions.css lays the row out horizontally by default. */
.event-actions.event-page__actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
}

.event-page__actions .event-action {
  justify-content: center;
  width: 100%;
}

@media (max-width: 900px) {

  /* Back to a row once the panel is full width. */
  .event-actions.event-page__actions {
    flex-direction: row;
    align-items: center;
  }

  .event-page__actions .event-action {
    width: auto;
  }

}

/* --- Attachments ------------------------------------------------------- */

.event-page__downloads .field__label {
  /* The panel heading already says "Attachments". */
  display: none;
}

.event-page__downloads .field__item + .field__item {
  margin-top: 8px;
}

.event-page__downloads a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ep-green-dark);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.event-page__downloads a:hover,
.event-page__downloads a:focus-visible {
  color: var(--ep-orange);
}

/* The file size Drupal prints after the link. */
.event-page__downloads .file__size {
  color: var(--ep-muted);
  font-weight: 400;
}

/* =========================================
   DETAILS

   Every field the template did not place by hand. The markup is core's own
   field.html.twig, so these rules style label/value pairs generically -- a
   field added to the content type lands here already looking right.
========================================= */

.event-page__details {
  padding: 18px;
  border: 1px solid var(--ep-line);
  border-radius: 10px;
  background: #fff;
}

.event-page__details .field {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ep-line);
}

.event-page__details .field:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.event-page__details .field__label {
  color: var(--ep-muted);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.event-page__details .field__item,
.event-page__details .field__items {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-page__details .field__item p:last-child {
  margin-bottom: 0;
}

.event-page__details a {
  color: var(--ep-green-dark);
  font-weight: 600;
}

.event-page__details a:hover,
.event-page__details a:focus-visible {
  color: var(--ep-orange);
}

/* A field configured with its label inline or hidden has no label cell, so the
   value takes the full width rather than sitting in the value column with a
   gap where the label would have been. */
.event-page__details .field--label-hidden,
.event-page__details .field--label-inline {
  grid-template-columns: minmax(0, 1fr);
}

.event-page__details .field--label-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 560px) {

  .event-page__details .field {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

}

/* =========================================
   PRINT
========================================= */

@media print {

  .event-page__grid {
    display: block;
  }

  .event-page__panel,
  .event-page__details {
    border: 1px solid #ccc;
    background: none;
  }

  /* A popup cannot be opened on paper, and a disabled control says nothing. */
  .event-page__actions {
    display: none;
  }

}