/**
 * @file
 * The Chairperson card on the Members page, and the Former Chairpersons page
 * its button leads to.
 *
 * Loaded on those two displays of the Chairperson view only, from
 * drupal8_zymphonies_theme_chairperson_preprocess(). Everything is scoped
 * under .cp-current (the card) or .cp-former (the list), the two classes that
 * function puts on the view, so no other table or heading on the site is
 * touched.
 *
 * Colours are the site's own: the saffron of the section captions, the green
 * of the main navigation, and the tricolour rule the event popup already uses.
 */

.cp-current,
.cp-former {
  --cp-green: #1b6b3a;
  --cp-green-dark: #14512e;
  --cp-saffron: #f3873e;
  --cp-saffron-dark: #c96b1c;
  --cp-ink: #14231a;
  --cp-muted: #5c6862;
  --cp-line: #e4e8e2;
}

/* =========================================
   SECTION HEADING
   The same saffron band as the table captions further down the Members page
   ("Official Members" and the rest), so the card reads as one more section of
   that page rather than something bolted on.
========================================= */

.cp-current .cp-heading {
  margin: 0 0 18px;
  padding: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, var(--cp-saffron) 40%, var(--cp-saffron) 60%, rgba(255, 255, 255, 0) 90%);
  color: #fff;
  font-size: 1.2em;
  font-weight: 900;
  line-height: 145%;
  text-align: center;
  text-transform: capitalize;
  text-shadow: 3px 4px 4px rgba(0, 0, 0, .5);
}

/* =========================================
   THE CARD
========================================= */

.cp-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin: 0 0 32px;
  padding: 34px 36px 30px;
  overflow: hidden;
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  background: linear-gradient(115deg, #fff 0%, #fff 55%, #fdf6ee 100%);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .06),
    0 22px 44px -22px rgba(20, 81, 46, .38);
}

/* The tricolour rule along the top. */
.cp-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg,
    #ff9933 0 33.33%,
    #f2f2f2 33.33% 66.66%,
    #138808 66.66% 100%);
}

/* A faint 24-spoke chakra behind the right-hand end, echoing the one in the
   page banner. Decoration only, so it sits under everything else. */
.cp-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -80px;
  z-index: -1;
  width: 280px;
  height: 280px;
  border: 7px solid rgba(243, 135, 62, .10);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(243, 135, 62, .14) 0 9%, transparent 9.5%),
    repeating-conic-gradient(rgba(243, 135, 62, .10) 0deg 2.5deg, transparent 2.5deg 15deg);
  transform: translateY(-50%);
  pointer-events: none;
}

/* --- The seal: the site's logo in a saffron-ringed medallion ------------- */

.cp-card__seal {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 3px var(--cp-saffron),
    0 0 0 9px rgba(243, 135, 62, .16),
    0 14px 28px -10px rgba(0, 0, 0, .35);
}

.cp-card__seal img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.cp-card__seal .fa {
  color: var(--cp-green);
  font-size: 44px;
}

/* --- Name, status and serving period ------------------------------------ */

.cp-card__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 11px;
  border: 1px solid #cfe5d7;
  border-radius: 999px;
  background: #eaf5ee;
  color: var(--cp-green-dark);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.cp-card__pulse {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d48;
  animation: cp-pulse 2.2s ease-out infinite;
}

@keyframes cp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31, 157, 72, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(31, 157, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 157, 72, 0); }
}

.cp-current .cp-card__name {
  margin: 12px 0 14px;
  color: var(--cp-ink);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .2px;
}

/* A short saffron rule under the name. */
.cp-current .cp-card__name::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cp-saffron), #f6b26b);
}

.cp-card__period {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--cp-muted);
}

.cp-card__period .fa {
  color: var(--cp-saffron-dark);
  font-size: 15px;
}

.cp-card__period-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.cp-card__period-value {
  color: var(--cp-ink);
  font-size: 16px;
  font-weight: 700;
}

/* =========================================
   THE BUTTON
========================================= */

.cp-card__action {
  align-self: end;
}

.cp-btn,
.cp-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 40px;
  background: linear-gradient(135deg, var(--cp-green) 0%, var(--cp-green-dark) 100%);
  box-shadow: 0 8px 18px -8px rgba(20, 81, 46, .6);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease, box-shadow .25s ease, transform .18s ease;
}

.cp-btn:hover,
.cp-btn:focus-visible {
  background: linear-gradient(135deg, var(--cp-saffron) 0%, var(--cp-saffron-dark) 100%);
  box-shadow: 0 12px 24px -10px rgba(201, 107, 28, .65);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

.cp-btn:focus-visible {
  outline: 3px solid rgba(243, 135, 62, .45);
  outline-offset: 3px;
}

.cp-btn__arrow {
  transition: transform .25s ease;
}

.cp-btn:hover .cp-btn__arrow,
.cp-btn:focus-visible .cp-btn__arrow {
  transform: translateX(4px);
}

/* With no chairperson in office the view shows no card, only this button. */
.cp-current > footer {
  margin: 0 0 32px;
  text-align: center;
}

/* =========================================
   FORMER CHAIRPERSONS PAGE
========================================= */

.cp-former > header {
  margin: 0 0 18px;
}

.cp-former__back,
.cp-former__back:visited {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border: 1px solid #cfe0d5;
  border-radius: 40px;
  background: #f3f9f5;
  color: var(--cp-green-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}

.cp-former__back:hover,
.cp-former__back:focus-visible {
  border-color: var(--cp-green);
  background: var(--cp-green);
  color: #fff;
  text-decoration: none;
}

.cp-former__back:focus-visible {
  outline: 3px solid rgba(20, 81, 46, .35);
  outline-offset: 2px;
}

/* The list keeps its table -- it is a register, and a table reads as one --
   but as a single rounded panel with horizontal rules only. */
.cp-former table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--cp-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 34px -22px rgba(16, 24, 40, .4);
}

/* Solid, not a gradient: each cell would draw its own and leave a seam at
   every column boundary. */
.cp-former th {
  padding: 14px 18px;
  border: 0;
  background: var(--cp-green);
  color: #fff;
  font-size: 14px;
  letter-spacing: .3px;
}

.cp-former td {
  padding: 14px 18px;
  border: 0;
  border-top: 1px solid var(--cp-line);
  color: var(--cp-muted);
}

.cp-former tbody tr:first-child td {
  border-top: 0;
}

.cp-former tbody tr:nth-of-type(odd) {
  background: #fafbf9;
}

.cp-former tbody tr:nth-of-type(even) {
  background: #fff;
}

.cp-former tbody tr {
  transition: background .2s ease;
}

.cp-former tbody tr:hover {
  background: #fdf3e9;
}

.cp-former .views-field-counter {
  width: 90px;
  text-align: center;
}

.cp-former td.views-field-counter {
  color: var(--cp-saffron-dark);
  font-weight: 800;
}

.cp-former td.views-field-field-chairperson-name {
  color: var(--cp-ink);
  font-weight: 700;
}

/* =========================================
   SMALLER SCREENS
========================================= */

@media (max-width: 991px) {

  /* The button drops under the name, lined up with it. */
  .cp-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px 24px;
    padding: 30px 26px 26px;
  }

  .cp-card__action {
    grid-column: 2;
  }

}

@media (max-width: 575px) {

  /* One centred column: seal, name, period, button. */
  .cp-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 18px;
    padding: 30px 18px 24px;
    text-align: center;
  }

  .cp-card::after {
    top: auto;
    right: -110px;
    bottom: -110px;
    transform: none;
  }

  .cp-card__seal {
    width: 92px;
    height: 92px;
  }

  .cp-current .cp-card__name {
    font-size: 22px;
  }

  .cp-current .cp-card__name::after {
    margin-right: auto;
    margin-left: auto;
  }

  .cp-card__period {
    justify-content: center;
  }

  .cp-card__action {
    grid-column: 1;
    align-self: auto;
    width: 100%;
  }

  .cp-btn {
    justify-content: center;
    width: 100%;
    white-space: normal;
  }

  .cp-former th,
  .cp-former td {
    padding: 11px 10px;
    font-size: 13.5px;
  }

  .cp-former th {
    white-space: normal;
  }

  .cp-former .views-field-counter {
    width: 52px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .cp-card__pulse { animation: none; }
  .cp-btn,
  .cp-btn__arrow,
  .cp-former tbody tr { transition: none; }
  .cp-btn:hover,
  .cp-btn:focus-visible,
  .cp-btn:hover .cp-btn__arrow { transform: none; }
}

@media print {
  .cp-card,
  .cp-former table { box-shadow: none; }
  .cp-card::after,
  .cp-card__action,
  .cp-current > footer,
  .cp-former > header { display: none; }
}