/* Pride Event Directory -- poster grid, v2.0.0
   Every rule is scoped under .pcc-evdir and every class is namespaced
   pcc-evdir-*. This site has already lost a card's footer to the theme's
   generic `.footer` rule once (see grand-marshal-showcase); nothing here
   uses a name a theme or another plugin is likely to also style.
   Palette matches pcc-parade-page/assets/parade.css and the performer-lineup
   card work in parade-bp-app: aubergine + purple, rainbow accent. */

.pcc-evdir {
  --pcc-evdir-purple: #732982;
  --pcc-evdir-purple-dark: #5f2169;
  --pcc-evdir-aubergine: #2b0d38;
  --pcc-evdir-ink: #1e293b;
  --pcc-evdir-muted: #6b7280;
  --pcc-evdir-rainbow: linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787);
  display: block;
  padding-block: 8px 12px;
  color: var(--pcc-evdir-ink);
  /* The grid below reads ITS OWN width, not the viewport's -- see parade-bp-app's
     bill grid for the same fix to the same problem. A WPBakery row can be
     boxed, sidebarred, or full-width; a plain viewport media query would put
     three columns in a 480px sidebar column just because the BROWSER window
     is wide. inline-size only: height still follows the content. */
  container: pcc-evdir / inline-size;
}

/* ---------- Controls: search + month navigation ---------- */
.pcc-evdir-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
  margin: 0 0 28px;
}
.pcc-evdir-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 260px;
  max-width: 380px;
  margin: 0;
}
.pcc-evdir-search-label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--pcc-evdir-muted);
}
.pcc-evdir-search-row { display: flex; gap: 8px; }
.pcc-evdir-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #e0d3e6;
  background: #fff;
  font-size: .95rem;
  color: var(--pcc-evdir-ink);
  -webkit-appearance: none;
  appearance: none;
}
.pcc-evdir-search-input::placeholder { color: #9c93a6; }
.pcc-evdir-search-input:focus-visible,
.pcc-evdir-search-input:focus {
  outline: 3px solid var(--pcc-evdir-purple);
  outline-offset: 2px;
}
.pcc-evdir-search-btn {
  /* Without appearance:none, an unstyled <button> can keep its native OS
     chrome layered OVER any background colour we set -- on macOS in dark
     mode this painted the button solid black no matter what var()
     resolved to. Same failure class as the theme's generic .footer rule
     darkening a card footer; the fix here is just to opt all the way out
     of native form-control theming before setting our own. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  background: var(--pcc-evdir-purple) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: .92rem;
  font-family: inherit;
  line-height: normal;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.pcc-evdir-search-btn:hover { background: var(--pcc-evdir-purple-dark) !important; }
.pcc-evdir-search-btn:focus-visible { outline: 3px solid var(--pcc-evdir-aubergine); outline-offset: 2px; }
.pcc-evdir-search-btn:active { transform: translateY(1px); }
.pcc-evdir-js-count { font-size: .8rem; color: var(--pcc-evdir-muted); }

/* A bare `nav{height:119px!important;padding-top:8px!important}` rule ships
   in performer-portal's ppm-ent-schedule.css with no scoping selector at
   all -- written for the theme's own header nav, but landing on every
   <nav> on any page that stylesheet is enqueued on, ours included. Same
   failure as the generic `.footer` collision noted in the brief; the fix
   is the same too: win back the box model explicitly, !important for
   !important, on our own (higher-specificity) namespaced class. */
.pcc-evdir-monthnav {
  display: flex !important;
  align-items: center;
  gap: 14px;
  height: auto !important;
  padding: 0 !important;
  margin: 0;
}
.pcc-evdir-monthnav-heading {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 900;
  color: var(--pcc-evdir-ink);
  min-width: 11ch;
  text-align: center;
}
.pcc-evdir-monthnav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f3e8f7;
  color: var(--pcc-evdir-purple) !important;
  font-size: 1.15rem;
  text-decoration: none !important;
  transition: background .18s ease, transform .18s ease;
}
.pcc-evdir-monthnav-arrow:hover { background: #e6d3ee; transform: translateY(-1px); }
.pcc-evdir-monthnav-arrow:focus-visible { outline: 3px solid var(--pcc-evdir-purple); outline-offset: 2px; }

.pcc-evdir-monthnav--search { gap: 18px; flex-wrap: wrap; }
.pcc-evdir-clear-search {
  color: var(--pcc-evdir-purple) !important;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none !important;
}
.pcc-evdir-clear-search:hover,
.pcc-evdir-clear-search:focus-visible { text-decoration: underline !important; }
.pcc-evdir-clear-search:focus-visible { outline: 3px solid var(--pcc-evdir-purple); outline-offset: 2px; }

.pcc-evdir-result-count { margin: 0 0 16px; color: var(--pcc-evdir-muted); font-size: .92rem; }

/* ---------- Month view: the way back to Upcoming ---------- */
.pcc-evdir-monthnav-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.pcc-evdir-back-upcoming {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pcc-evdir-purple) !important;
  text-decoration: none !important;
}
.pcc-evdir-back-upcoming:hover,
.pcc-evdir-back-upcoming:focus-visible { text-decoration: underline !important; }
.pcc-evdir-back-upcoming:focus-visible { outline: 3px solid var(--pcc-evdir-purple); outline-offset: 2px; }

/* ---------- The default Upcoming view ---------- */
.pcc-evdir-monthnav--upcoming {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.pcc-evdir-monthnav--upcoming .pcc-evdir-monthnav-heading {
  text-align: left;
  min-width: 0;
  font-size: 1.4rem;
}
.pcc-evdir-browse-month {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--pcc-evdir-purple) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.pcc-evdir-browse-month:hover,
.pcc-evdir-browse-month:focus-visible { text-decoration: underline !important; }
.pcc-evdir-browse-month:focus-visible { outline: 3px solid var(--pcc-evdir-purple); outline-offset: 2px; }

/* One heading between each month's run of cards. Rainbow rule matches the
   page-level headings used elsewhere on the site (parade.css's h2 rule). */
.pcc-evdir-month-heading {
  margin: 36px 0 18px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pcc-evdir-ink);
  padding-bottom: 10px;
  border-bottom: 1px solid #efe3f2;
}
.pcc-evdir-upcoming > .pcc-evdir-month-heading:first-child { margin-top: 4px; }

/* Three across desktop, two tablet, one phone -- by the WRAPPER'S OWN width
   (@container, set on .pcc-evdir above), not the browser viewport. A plain
   @media query here would count the visitor's whole window, and WPBakery is
   just as likely to drop this shortcode into a boxed or sidebarred column as
   a full-width row; parade-bp-app's bill grid hit exactly this and container
   queries are its fix. @supports covers a browser with no container-query
   support at all, falling back to the old viewport-based breakpoints. */
@container pcc-evdir (max-width: 620px) {
  .pcc-evdir-controls { flex-direction: column; align-items: stretch; }
  /* flex-basis tracks the flex container's MAIN axis -- 260px was a width
     basis in the desktop row layout, and switching the parent to a COLUMN
     here silently turns that same 260px into a HEIGHT basis instead,
     stretching the search form to a 260px-tall empty box. Reset it
     explicitly rather than relying on the shorthand from the row layout. */
  .pcc-evdir-search { max-width: none; flex: 1 1 auto; }
  .pcc-evdir-monthnav { justify-content: center; }
  .pcc-evdir-monthnav-wrap { align-items: center; width: 100%; }
  .pcc-evdir-monthnav--upcoming { justify-content: center; text-align: center; }
  .pcc-evdir-monthnav--upcoming .pcc-evdir-monthnav-heading { text-align: center; width: 100%; }
}

/* ---------- The grid ---------- */
.pcc-evdir-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 20px;
}
@container pcc-evdir (min-width: 640px) {
  .pcc-evdir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container pcc-evdir (min-width: 1024px) {
  .pcc-evdir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 620px) {
    .pcc-evdir-controls { flex-direction: column; align-items: stretch; }
    .pcc-evdir-search { max-width: none; flex: 1 1 auto; }
    .pcc-evdir-monthnav { justify-content: center; }
    .pcc-evdir-monthnav-wrap { align-items: center; width: 100%; }
    .pcc-evdir-monthnav--upcoming { justify-content: center; text-align: center; }
    .pcc-evdir-monthnav--upcoming .pcc-evdir-monthnav-heading { text-align: center; width: 100%; }
  }
  @media (min-width: 640px) {
    .pcc-evdir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .pcc-evdir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
  }
}

.pcc-evdir-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--pcc-evdir-muted);
  font-size: 1.02rem;
  background: #faf5fb;
  border: 1px solid #efe3f2;
  border-radius: 16px;
}

/* ---------- The card ---------- */
.pcc-evdir-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(43, 13, 56, .12);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pcc-evdir-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(43, 13, 56, .20); }
.pcc-evdir-card:focus-visible {
  outline: 3px solid var(--pcc-evdir-purple);
  outline-offset: 3px;
  transform: translateY(-4px);
}

/* The flyer (or brand panel) box: fixed 2:3, matching the registered
   pcc_evdir_card rendition, so every row of the grid lines up regardless of
   which cards have a photograph. */
.pcc-evdir-card-media {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--pcc-evdir-aubergine);
  overflow: hidden;
}
.pcc-evdir-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Flyers are usually text-heavy top and bottom (title banner, footer
     details); a dead-centre crop is the safest default when we cannot know
     which part matters most for a given upload. */
  object-position: 50% 50%;
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.pcc-evdir-card:hover .pcc-evdir-card-img,
.pcc-evdir-card:focus-visible .pcc-evdir-card-img { transform: scale(1.04); }

/* ---------- No-flyer fallback: a designed brand panel, never a broken image ---------- */
.pcc-evdir-brand {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 22px 20px 20px;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(117,7,135,.55) 0%, rgba(117,7,135,0) 62%),
    radial-gradient(115% 65% at 100% 100%, rgba(0,77,255,.30) 0%, rgba(0,77,255,0) 65%),
    linear-gradient(160deg, #3d1254 0%, #2b0d38 55%, #1a0726 100%);
  color: #fff;
}
.pcc-evdir-brand-stripe {
  height: 5px;
  width: 46px;
  border-radius: 999px;
  margin-bottom: 22px;
  background: var(--pcc-evdir-rainbow);
}
.pcc-evdir-brand-daynum {
  font-size: clamp(2.5rem, 9vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.pcc-evdir-brand-dow {
  margin-top: 6px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  opacity: .82;
}
.pcc-evdir-brand-title {
  margin-top: auto;
  padding-top: 18px;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.32;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Card body: date, time, title, venue ---------- */
.pcc-evdir-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 20px;
}
.pcc-evdir-card-date {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pcc-evdir-purple);
}
.pcc-evdir-card-primary-date { font-weight: 800; }
.pcc-evdir-recur-badge {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f3e8f7;
  color: var(--pcc-evdir-purple);
  font-size: .66rem;
  letter-spacing: .4px;
  vertical-align: middle;
}
.pcc-evdir-recur-dates { color: var(--pcc-evdir-muted); font-weight: 700; letter-spacing: 0; text-transform: none; }
.pcc-evdir-card-time { font-size: .85rem; color: #4b5563; }
.pcc-evdir-card-title {
  margin: 6px 0 2px;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--pcc-evdir-ink) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcc-evdir-card-venue { font-size: .85rem; color: var(--pcc-evdir-muted); }

/* JS-filtered out (assets/grid.js). Plain [hidden] would already do this,
   named so the intent -- "hidden because it does not match the live search"
   vs. any other reason a card might carry [hidden] -- is clear at a glance. */
.pcc-evdir-card.is-evdir-filtered { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pcc-evdir-card,
  .pcc-evdir-card-img,
  .pcc-evdir-monthnav-arrow,
  .pcc-evdir-search-btn { transition: none; }
  .pcc-evdir-card:hover,
  .pcc-evdir-card:focus-visible { transform: none; }
  .pcc-evdir-card:hover .pcc-evdir-card-img,
  .pcc-evdir-card:focus-visible .pcc-evdir-card-img { transform: none; }
}