/* ============================================================================
   nōesi · panel.css
   The reading panel, and the "there is more here" line that opens one.

   TWO PAGES USE THIS, and that is why it is a file rather than part of either
   of them. V · Δράσεις opens the piece written about a Δράση; II · Η Ομάδα
   opens a teacher's full biography. They are the same gesture and the same
   dialog, so they are the same code: a second copy is a second copy to keep in
   step, and the one that gets forgotten is always the one nobody is looking at.

   What a caller supplies is data attributes on the opener and an element to
   copy — see assets/js/panel.js for the contract. Nothing here knows what a
   Δράση or a teacher is.

   Built out of the tokens in noesis.css. No new colours, no new type sizes.
   ========================================================================== */

/* ---- 1. the line that opens one ----------------------------------------- */
/* Uppercase, letterspaced, rose, with a short rule that reaches further when
   the thing it belongs to is hovered. The rule is the whole gesture: it is the
   site's own drawn line, the same one the route is made of, saying there is
   further to go. */
.read-more{
  margin-top:var(--s2);
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--accent-ink);
  display:flex;
  align-items:center;
  gap:var(--s2);
  transition:color .3s ease;
}
.read-more::after{
  content:'';
  height:1px;
  width:1.6rem;
  background:var(--accent);
  transition:width .45s cubic-bezier(.2,.7,.3,1);
}
/* when the opener IS the link. Where the whole card is the target instead, the
   card's own stylesheet reaches in — see .act-card:hover in actions.css. */
a.read-more:hover,
a.read-more:focus-visible{color:var(--stone)}
a.read-more:hover::after,
a.read-more:focus-visible::after{width:3rem}

@media (prefers-reduced-motion:reduce){
  .read-more::after{transition:none}
}

/* ---- 2. the panel ------------------------------------------------------- */
/* One dialog per page, filled from whichever opener was pressed. It scrolls
   itself rather than the page behind it, and it is a column of the measure the
   rest of the site reads at: an article the full width of a laptop is an
   article nobody finishes. */
.panel{
  position:fixed;
  inset:0;
  z-index:80;
  /* Not quite opaque, and blurred behind: at .94 and no blur the chapter
     masthead ghosted straight through the article, and a 90px word sitting
     behind a paragraph is a paragraph nobody reads cleanly. The blur keeps the
     sense of a layer over the page without the page competing for the eye. */
  background:rgba(22,22,22,.965);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow-y:auto;
  overscroll-behavior:contain;
  visibility:hidden;
  opacity:0;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.panel[data-open="true"]{
  visibility:visible;
  opacity:1;
  transition:opacity .35s ease;
}
.panel-inner{
  position:relative;
  max-width:44rem;
  margin:0 auto;
  padding:var(--s7) var(--pad-x);
  transform:translateY(14px);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.panel[data-open="true"] .panel-inner{transform:none}

@media (prefers-reduced-motion:reduce){
  .panel,.panel-inner{transition:none}
  .panel-inner{transform:none}
}

.panel-close{
  position:fixed;
  top:var(--s3);
  right:var(--s3);
  z-index:2;
  padding:var(--s2);
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--stone);
}

/* The frame takes its shape from the opener, because the two callers do not
   agree on one: a Δράση is a landscape photograph and a teacher is a portrait,
   and cropping either to the other's shape is how you cut somebody's head off. */
.panel-frame{
  aspect-ratio:var(--panel-ar,3/2);
  background:var(--plate-bg);
  overflow:hidden;
  margin-bottom:var(--s4);
}
.panel-frame:empty{display:none}
.panel-frame img{width:100%;height:100%;object-fit:cover}
/* a portrait is not cropped to a band the width of the column; it stands in
   the middle of the frame at its own shape */
.panel-frame--portrait{
  max-width:22rem;
  aspect-ratio:var(--panel-ar,4/5);
}

.panel-tags{margin-bottom:var(--s1)}
.panel-tag{
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--accent-ink);
}
.panel-tags:has(.panel-tag:empty){display:none}

.panel-title{
  font-family:var(--font-display);
  font-weight:200;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.panel-meta{
  margin-top:var(--s2);
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.panel-meta:empty{display:none}
.panel-meta .sep::before{
  content:'·';
  margin:0 .5em;
  color:var(--grey);
}

/* ---- 3. what the panel prints ------------------------------------------- */
/* The tags a caller's copy may contain are decided in PHP, in
   noesi_richtext_allowed(). Everything on that list is styled here, so nothing
   the owner is allowed to type can arrive unstyled. */
.panel-body{
  margin-top:var(--s4);
  padding-top:var(--s4);
  border-top:1px solid var(--rule);
}
.panel-body p{
  margin-bottom:var(--s3);
  font-size:var(--t-lead);
  line-height:1.75;
  max-width:var(--measure);
}
.panel-body ul,
.panel-body ol{
  margin:0 0 var(--s3) var(--s3);
  padding-left:var(--s2);
  font-size:var(--t-lead);
  line-height:1.75;
  max-width:var(--measure);
}
.panel-body li{margin-bottom:var(--s1)}
.panel-body li::marker{color:var(--accent-ink)}
.panel-body blockquote{
  margin:var(--s4) 0;
  padding-left:var(--s3);
  border-left:1px solid var(--accent);
  font-family:var(--font-display);
  font-weight:200;
  font-size:var(--t-quote);
  line-height:1.3;
  color:var(--stone);
}
.panel-body a{
  color:var(--accent-ink);
  border-bottom:1px solid var(--rule-strong);
}
.panel-body a:hover{border-bottom-color:var(--accent)}

/* the outlined control, the same one every other action on the site takes */
.panel-cta{
  margin-top:var(--s3);
  display:inline-flex;
  align-items:center;
  padding:.95rem 1.9rem;
  border:1px solid var(--rule-strong);
  font-size:var(--t-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.panel-cta:hover{
  background:var(--stone);
  color:var(--charcoal);
  border-color:var(--stone);
}

@media (max-width:860px){
  .panel-inner{padding:var(--s6) var(--pad-x)}
  .panel-close{top:var(--s2);right:var(--s2)}
}