/* ============================================================================
   nōesi · actions.css
   V · ΔΡΑΣΕΙΣ — the card grid, the filter row and the panel that opens.

   Its own file, and loaded only on its own page. noesis.css and motion.css are
   the static build's stylesheets byte for byte, so that they can be re-exported
   and dropped back in; this design does not exist in the static build, and
   putting it in there would mean the next export quietly deleted it.

   Everything here is built out of the tokens in noesis.css. No new colours, no
   new type sizes: a section that invents its own palette is a section that
   stops looking like the site the first time either one changes.

   THE PHOTOGRAPHS ARE THE POINT OF HALF OF THIS FILE. Every other picture on
   nōesi comes from one shoot, graded once. These arrive from a phone, from a
   friend, from whoever was there on the day, and they have to sit on the same
   page without one of them reading as a mistake. Three things do that work:
   the frame is a fixed 4:3 crop, so shape is never a variable; the grade in
   .act-shot pulls the colour back toward the site's range; and the scrim under
   the category tag darkens the foot of every plate into the charcoal ground,
   so the bottom edge of a bright photograph and a dim one are the same edge.
   ========================================================================== */

/* ---- 1. the filter row -------------------------------------------------- */
/* Text, a hairline and a number. Not pills: a row of filled capsules is the
   one shape on this page that would announce itself as an interface, and the
   rest of the site sets its labels as small caps in the margin. */
.act-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  /* --s2 and not --s3 between chips: at 1.5rem the eight of them measured
     1097px inside a 1101px column at the design width, so the last one wrapped
     to a line of its own. Four pixels of headroom is not a layout. */
  gap:var(--s1) var(--s2);
  margin-bottom:var(--s5);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule);
}
.act-filters-label{
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-right:var(--s1);
}
.act-filters-rule{
  width:1px;
  height:1.1em;
  background:var(--rule-strong);
  margin:0 calc(var(--s1) / 2);
}
.act-chip{
  position:relative;
  padding:.35rem 0;
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-mute);
  transition:color .3s ease;
}
.act-chip .n{
  font-size:.65rem;
  letter-spacing:0;
  vertical-align:.5em;
  margin-left:.3em;
  color:var(--grey);
}
/* the underline is the state, and it grows from the left rather than
   appearing, so a change of filter reads as a movement */
.act-chip::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  height:1px;width:100%;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.act-chip:hover{color:var(--ink)}
.act-chip[aria-pressed="true"]{color:var(--accent-ink)}
.act-chip[aria-pressed="true"]::after{transform:scaleX(1)}
.act-chip[aria-pressed="true"] .n{color:var(--accent-ink)}

/* ---- 2. the grid -------------------------------------------------------- */
.act-grid{
  display:grid;
  gap:var(--s6) var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
}
.act-card{position:relative}
.act-card[data-hide="true"]{display:none}

/* ---- 3. the plate ------------------------------------------------------- */
/* One shape for every card, whatever was uploaded. The crop is decided in the
   dashboard — see noesi_action_focus() — and the box below is the same 4:3 the
   `noesi-action` image size is cut to, so what the owner is shown in the meta
   box is what prints here. */
/* Everything inside the frame is positioned against it rather than flowed:
   the tag has to sit in the same corner whether there is a photograph behind
   it or not, and a flex row put it wherever the empty state's own width
   happened to leave room. */
.act-frame{
  position:relative;
  aspect-ratio:4/3;
  background:var(--plate-bg);
  overflow:hidden;
  margin-bottom:var(--s3);
}
.act-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.act-frame-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s3) var(--s3) var(--s5);
  font-size:var(--t-micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  text-align:center;
}

/* the two treatments the Customizer offers. 'off' adds no filter at all. */
.act-shot--soft{filter:saturate(.72) contrast(1.06) brightness(.97)}
/* .act-shot--duo also carries `duo`, which is the site's own SVG duotone from
   inc/render.php; the fallback there covers browsers without SVG filters. */

/* The scrim. Structural, not decoration: it is what guarantees the category
   tag has something to sit on whatever the photograph is doing at that corner,
   and what makes the foot of every plate resolve into the ground. */
.act-frame::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:58%;
  background:linear-gradient(to top,rgba(28,28,28,.92),rgba(28,28,28,.55) 42%,transparent);
  pointer-events:none;
}
.act-frame .act-cat{
  position:absolute;
  left:0;
  bottom:0;
  z-index:1;
}
.act-frame .act-live{z-index:1}

.act-cat{
  padding:0 var(--s3) var(--s2);
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--accent-ink);
}
/* something happening today, marked in the opposite corner with the same
   rose the route is drawn in */
.act-live{
  position:absolute;
  top:var(--s2);
  right:var(--s3);
  display:inline-flex;
  align-items:center;
  gap:.45em;
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--stone);
}
.act-live::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
}

/* ---- 4. the card's type ------------------------------------------------- */
.act-title{
  font-family:var(--font-display);
  font-weight:200;
  font-size:clamp(1.3rem,2vw,1.65rem);
  line-height:1.18;
  letter-spacing:-.01em;
}
.act-title a{
  display:block;
  /* the whole card is the target. A title you have to hit exactly is a title
     nobody hits on a phone. */
  position:static;
}
.act-title a::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
}
.act-meta{
  margin-top:var(--s1);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.act-meta .act-place::before{
  content:'·';
  margin:0 .5em;
  color:var(--grey);
}
.act-sum{
  margin-top:var(--s2);
  font-size:var(--t-small);
  line-height:1.7;
  color:var(--ink);
  /* three lines, and then an ellipsis. The cards sit beside each other and a
     summary somebody wrote at four times the length of its neighbours is the
     fastest way to make a tidy grid look broken. The whole piece is one tap
     away, which is what the field under it is for. */
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* The read-more line itself is .read-more, in panel.css, because the teachers'
   cards carry the identical gesture. What is different here is only WHAT gets
   hovered: on a teacher the line is the link, and on a Δράση the whole card
   is, so the reach has to be driven from the card. */

/* ---- 5. what the hover does --------------------------------------------- */
.act-card:hover .act-frame img,
.act-card:focus-within .act-frame img{transform:scale(1.035)}
.act-card:hover .read-more::after,
.act-card:focus-within .read-more::after{width:3rem}
.act-card:hover .read-more,
.act-card:focus-within .read-more{color:var(--stone)}
.act-card:focus-within .act-title{color:var(--stone)}

@media (prefers-reduced-motion:reduce){
  .act-frame img,.act-chip::after{transition:none}
  .act-card:hover .act-frame img{transform:none}
}

/* ---- 6. nothing under this filter --------------------------------------- */
.act-none{
  padding:var(--s5) 0;
  font-size:var(--t-small);
  color:var(--ink-mute);
}
/* ---- 7. what only this page's panel needs -------------------------------
   The dialog itself is panel.css, shared with II · Η Ομάδα. These are the two
   things that only ever appear inside a Δράση's copy of it. */
.act-shots{
  display:grid;
  gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  margin:var(--s5) 0;
}
.act-shots figure{
  aspect-ratio:3/2;
  background:var(--plate-bg);
  overflow:hidden;
}
.act-shots img{width:100%;height:100%;object-fit:cover}

/* ---- 8. phones ---------------------------------------------------------- */
@media (max-width:860px){
  .act-grid{gap:var(--s5) var(--s3)}
  /* the chips run off the edge rather than wrapping to four lines above the
     first photograph */
  .act-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .act-filters::-webkit-scrollbar{display:none}
  .act-chip,.act-filters-label{white-space:nowrap}
}

/* ---- 9. with no JavaScript ---------------------------------------------- */
/* The articles are in the document under their own cards, so the page without
   JavaScript is the whole page: every Δράση, every word, open. What it loses
   is the panel and the filters, which are both conveniences. */
.act-body{display:none}