/**
 * Activity lenses: Events (dated list with poster-style date tiles),
 * Volunteer and Fundraising (card grids with collection artwork). All in the
 * PTA's black/gold social-graphic language; theme-token fallbacks keep the
 * module presentable on any theme.
 */

.pta-act-events {
  max-width: 920px;
  margin: 0 auto;
}

.pta-act-month {
  margin: 0 0 40px;
}

.pta-act-month-title {
  font-family: var(--pta-font-display, "PTA Display", "Arial Narrow", sans-serif);
  font-weight: var(--pta-font-display-weight, 400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--pta-primary, #f4b41c);
  padding-bottom: 6px;
  margin: 0 0 18px;
}

.pta-act-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--pta-line, #e7e2d6);
}
.pta-act-card:last-child {
  border-bottom: 0;
}

/* Poster-style date tile: black block, gold month, big day numeral. */
.pta-act-tile {
  flex: none;
  width: 72px;
  border-radius: var(--pta-radius, 10px);
  background: var(--pta-black, #141414);
  border: 2px solid var(--pta-primary, #f4b41c);
  text-align: center;
  padding: 8px 4px 10px;
}
.pta-act-tile-month {
  display: block;
  color: var(--pta-primary, #f4b41c);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pta-act-tile-day {
  display: block;
  color: #fff;
  font-family: var(--pta-font-display, "PTA Display", "Arial Narrow", sans-serif);
  font-size: 1.7rem;
  line-height: 1.1;
}

.pta-act-body {
  flex: 1;
  min-width: 0;
}

.pta-act-title {
  margin: 0 0 4px;
  font-family: var(--pta-font-display, "PTA Display", "Arial Narrow", sans-serif);
  font-weight: var(--pta-font-display-weight, 400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.25rem;
  display: inline-block;
  margin-right: 10px;
}

.pta-act-badge {
  display: inline-block;
  vertical-align: 3px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pta-black, #141414);
  color: var(--pta-primary, #f4b41c);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pta-act-when {
  margin: 0 0 6px;
  color: var(--pta-gray, #6b6b6b);
  font-size: 0.9em;
}

.pta-act-blurb {
  margin: 0 0 8px;
  line-height: 1.55;
}

.pta-act-ctas {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Buttons carry !important on color for one reason: a host theme's link color
   can out-specify plugin chrome. Divi's Extra emits
   .et_pb_pagebuilder_layout .et_pb_code a {color:...} at (0,2,1) AFTER this
   file, and the lens shortcodes live inside exactly that code module, which
   painted these buttons at 1.19:1 on Cox. Pair the fill with the palette's own
   on-primary token rather than plain dark text, which only reads on a light
   brand like Henry's gold. */
.pta-act-btn {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--pta-primary, #f4b41c);
  color: var(--pta-on-primary, #141414) !important;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}
/* Darken on hover rather than brighten: a brighter fill under unchanged text
   drops Cox to 3.04:1, while the secondary holds 9.15:1 and still suits gold. */
.pta-act-btn:hover {
  background: var(--pta-secondary, #d99a00);
}
.pta-act-btn--attend {
  background: transparent;
  color: var(--pta-secondary, #d99a00) !important;
  border: 2px solid var(--pta-secondary, #d99a00);
}
.pta-act-btn--attend:hover {
  background: var(--pta-cream, #fbf6ec);
}

.pta-act-empty {
  text-align: center;
  color: var(--pta-gray, #6b6b6b);
}

.pta-act-chips {
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================================
   Compact teaser (home page): the agenda as a multi-column grid
   so a screenful of events fills the width instead of stacking
   in one narrow column.
   ============================================================ */
/* Column count follows the CONTAINER, not the viewport.
   This teaser is dropped wherever a site wants it, and on Cox that is a
   one-third page-builder column about 330px wide. Viewport media queries were
   asking the wrong question: a 1400px window put four columns inside 330px and
   crushed every card. auto-fit with a minimum lets the grid work out how many
   actually fit, so the same markup gives one column in a sidebar and four
   across a full-width section, with no breakpoints to keep in sync.
   The inner min() stops it overflowing a container narrower than the minimum. */
.pta-act-events--compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
  max-width: var(--pta-maxw, 1120px);
}
.pta-act-events--compact .pta-act-card {
  border-bottom: 0;
  padding: 14px;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--pta-line, #e7e2d6);
  border-radius: var(--pta-radius, 10px);
  /* Brand depth, not a 5% smudge: these tiles sit on a tinted band and
     at 0.05 they had no edge at all. */
  box-shadow: var(--pta-shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.16));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Each tile is a link to that activity, so it answers the pointer the way the
   Volunteer and Fundraising tiles already do. */
.pta-act-events--compact .pta-act-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pta-shadow, 0 6px 24px rgba(0, 0, 0, 0.12));
}
.pta-act-events--compact .pta-act-title {
  font-size: 1.05rem;
}
/* Keep cells even: clamp the blurb to a couple of lines. */
.pta-act-events--compact .pta-act-blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9em;
}
.pta-act-badge--closed {
  background: var(--pta-line, #e7e2d6);
  color: var(--pta-gray, #6b6b6b);
}

/* ============================================================
   Card grid: Volunteer & Fundraising lenses
   ============================================================ */

.pta-act-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 24px;
  max-width: var(--pta-maxw, 1120px);
  margin: 0 auto;
}
@media (min-width: 760px) {
  .pta-act-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .pta-act-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pta-act-card--tile {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--pta-line, #e7e2d6);
  border-radius: var(--pta-radius, 10px);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--pta-shadow, 0 6px 24px rgba(0, 0, 0, 0.12));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pta-act-card--tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--pta-shadow-lift, 0 10px 24px rgba(0, 0, 0, 0.12));
}

/* Artwork band: the collection's own graphic, or a branded fallback. */
.pta-act-art {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 150px;
  background-color: var(--pta-black, #141414);
  /* Collection artwork over the brand mark: if the remote image is absent
     or fails, the hawk shows through instead of an empty black band. */
  background-image: var(--pta-act-art, none), var(--pta-banner-logo, none);
  background-size: cover, 45%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* No artwork: a slim branded strip instead of a tall empty rectangle. */
.pta-act-art--slim {
  aspect-ratio: auto;
  min-height: 0;
  height: 72px;
  background-image: var(--pta-banner-logo, none);
  background-size: auto 54px;
  background-position: right 16px center;
  background-color: var(--pta-black, #141414);
  box-shadow: inset 0 -3px 0 var(--pta-primary, #f4b41c);
}
/* Date stamp riding the artwork corner. */
.pta-act-stamp {
  position: absolute;
  left: 12px;
  bottom: -14px;
  min-width: 58px;
  padding: 5px 8px 7px;
  border-radius: 8px;
  background: var(--pta-black, #141414);
  border: 2px solid var(--pta-primary, #f4b41c);
  color: #fff;
  font-family: var(--pta-font-display, "PTA Display", "Arial Narrow", sans-serif);
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}
.pta-act-stamp b {
  display: block;
  color: var(--pta-primary, #f4b41c);
  font-size: 0.72rem;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pta-act-card--tile .pta-act-body {
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pta-act-card--tile .pta-act-ctas {
  margin-top: auto;
  padding-top: 12px;
}

@media (max-width: 480px) {
  .pta-act-card {
    gap: 12px;
  }
  .pta-act-tile {
    width: 60px;
  }
  .pta-act-tile-day {
    font-size: 1.4rem;
  }
}

/* ============================================================
   Standalone scope (foreign theme, as Cox was under Divi): match
   the site's heading face for month titles and date tiles.
   The PTA Foundry theme keeps "PTA Display" via theme support.
   ============================================================ */
.pta-act-standalone .pta-act-month-title,
.pta-act-standalone .pta-act-tile-day,
.pta-act-standalone .pta-act-title {
  font-family: Oswald, Helvetica, Arial, sans-serif;
}
.pta-act-standalone .pta-act-month-title {
  text-align: center;
}

/* Lens badges: which other sections an activity also belongs to.
   Lenses overlap by design, so an event that also needs helpers or takes money
   says so on its own card rather than making a parent go looking. */
.pta-act-badge--lens {
  background: var(--pta-cream);
  color: var(--pta-secondary);
  border: 1px solid var(--pta-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pta-act-badge--lens i {
  font-size: 0.9em;
}

/* ============================================================
   One activity: /{lens}/view/{slug}
   The page a flyer or QR code points at.
   ============================================================ */

.pta-act-detail-head {
  background: var(--pta-chrome, var(--pta-black, #141414));
  border-bottom: 4px solid var(--pta-chrome-accent, var(--pta-primary, #f4b41c));
  padding: 36px 0 32px;
  margin: 0 0 32px;
}
.pta-act-detail-head-inner {
  display: flex;
  align-items: center;
  gap: 22px;
}
.pta-act-tile--lg {
  width: 96px;
  padding: 12px 6px 14px;
}
.pta-act-tile--lg .pta-act-tile-day { font-size: 2.4rem; }
.pta-act-detail-headings { min-width: 0; }

.pta-act-detail-title {
  margin: 0;
  font-family: var(--pta-font-display, "PTA Display", "Arial Narrow", sans-serif);
  font-weight: var(--pta-font-display-weight, 400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.05;
  color: var(--pta-on-chrome, #fff);
}
.pta-act-detail-when {
  margin: 8px 0 0;
  color: var(--pta-on-chrome-muted, rgba(255, 255, 255, 0.8));
  font-size: 1.02rem;
}
.pta-act-detail-head .pta-act-chips { margin-top: 12px; }

.pta-act-detail-body {
  max-width: 760px;
  margin: 0 auto 56px;
}
.pta-act-detail-art {
  width: 100%;
  height: auto;
  border-radius: var(--pta-radius, 10px);
  margin: 0 0 24px;
  box-shadow: var(--pta-shadow-lift, 0 2px 18px rgba(0, 0, 0, 0.3));
}
.pta-act-detail-copy { line-height: 1.65; }
.pta-act-detail-copy p:first-child { margin-top: 0; }

/* Every route the activity offers, together. This is the whole reason the
   page exists, so the buttons get room rather than being a footnote. */
.pta-act-ctas--detail {
  margin: 28px 0 0;
  gap: 12px;
}
.pta-act-ctas--detail .pta-act-btn {
  padding: 12px 24px;
  font-size: 0.95rem;
}

.pta-act-detail-note {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-left: 4px solid var(--pta-secondary, #d99a00);
  background: var(--pta-cream, #fbf6ec);
  border-radius: var(--pta-radius, 10px);
}

.pta-act-detail-back {
  margin: 32px 0 0;
}
.pta-act-detail-back a {
  color: var(--pta-secondary, #d99a00);
  text-decoration: none;
  font-weight: 600;
}
.pta-act-detail-back a:hover { text-decoration: underline; }

/* Lens badges on the detail page are links back to their lens. */
a.pta-act-badge--lens { text-decoration: none; }
a.pta-act-badge--lens:hover {
  background: var(--pta-secondary, #d99a00);
  color: var(--pta-white, #fff);
  border-color: var(--pta-secondary, #d99a00);
}

/* Card titles are links now, and should not look like body links. */
.pta-act-title a {
  color: inherit;
  text-decoration: none;
}
.pta-act-title a:hover {
  color: var(--pta-secondary, #d99a00);
  text-decoration: underline;
}

.pta-act-viewall {
  margin: 28px 0 0;
  text-align: center;
}

/* The view-all link asks for the THEME's .pta-btn so it matches every other
   button on the page. Under a theme that does not define one it would render
   as bare blue text, so this is the fallback: same shape and colours as the
   other standalone button fallbacks (.pta-ft-standalone, .pta-contact--
   standalone), scoped so it never competes with a theme that has its own.

   :where() keeps this at zero specificity, so any real .pta-btn rule wins
   without needing to out-specify it. */
:where(.pta-act-viewall) .pta-btn {
  display: inline-block;
  background: var(--pta-primary, #f4b41c);
  color: var(--pta-on-primary, #141414);
  border: 0;
  border-radius: var(--pta-radius, 8px);
  padding: 14px 28px;
  font-weight: 700;
  text-decoration: none;
}
:where(.pta-act-viewall) .pta-btn:hover {
  background: var(--pta-secondary, #d99a00);
}

@media (max-width: 600px) {
  .pta-act-detail-head-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}