/* ============================================================
   STUDIO CARDS — the CTA the banner hands you on hover.
   Load AFTER redesign.css.

   Same concept as the work grid's .wg-cta: the card is an image,
   and the button is not part of its composition until the pointer
   arrives. It rests 12px low with no shadow, then rises, fades and
   lifts off the artwork.

   Two states live here. A project you can open ends in the system's
   arrow disc. A project that is not open yet ends in a lock, on
   frosted glass instead of a solid fill, so the difference is
   legible before you read the label.
   ============================================================ */

/* The studio banner is dark artwork in BOTH themes — that is why the
   title is a hard #fff here rather than var(--ink). The CTA takes the
   same treatment for the same reason: a themed fill would go near-black
   on a dark photograph in the dark theme and disappear. Everything
   below is hard-coded light, deliberately. */

/* ---------- shared: position and reveal ---------- */
.mini-cta {
  position: absolute;
  /* 24px, so the button's left edge lands on the same inset the card's
     title and description already use. */
  left: var(--space-lg); bottom: var(--space-lg);
  z-index: 3;
  /* the .wg-cta metrics: a 28px disc and 6/16 padding bring the 50px
     button down to 40px without touching the 16px label */
  gap: var(--space-md);
  padding: 6px 6px 6px var(--space-md);
  opacity: 0;
  translate: 0 12px;
  /* An explicit transparent shadow, so the lift has a value to travel
     FROM. From the keyword `none` it snaps instead of fading. */
  box-shadow: 0 0 0 0 rgba(19,18,23,0);
  transition: opacity var(--dur-fast) var(--ease-out-expo),
              translate var(--dur-med) var(--ease-out-expo),
              box-shadow var(--dur-med) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo);
}
.mini-card:hover .mini-cta,
.mini-card:focus-visible .mini-cta {
  opacity: 1;
  translate: none;
  box-shadow: var(--shadow-rest-sm);
}
/* Without a pointer there is no hover, so the CTA would never appear.
   On touch it simply ships visible. */
@media (hover: none) {
  .mini-cta { opacity: 1; translate: none; box-shadow: var(--shadow-rest-sm); }
}
/* The phone tier in redesign.css stretches every .btn to the full column so a
   page CTA is thumb-width. This one is not a page CTA — it is an object the
   banner hands you, absolutely positioned inside the artwork — and at 100% it
   became a bar clear across the card. Same correction the work grid's CTA
   needs, for the same reason: both are .btn variants that live on an image
   rather than in a column. */
@media (max-width: 620px) {
  .mini-cta { width: auto; }
}

/* ---------- open: light fill, ink label, arrow disc ----------
   The inverse of the page's primary, exactly as the footer's primary is
   inverted: on dark artwork the ink button is the one that vanishes, so
   the fill and the label trade places and the disc inverts with them. */
.mini-cta--open {
  background: #F9F9FB;
  color: #1F1E24;
}
.mini-card:hover .mini-cta--open,
.mini-card:focus-visible .mini-cta--open {
  background: #FFFFFF;
}
/* The disc is drawn in full here rather than inherited. .btn-primary::after
   is what normally draws it, but this button is not a .btn-primary — it is
   the inverted variant — so without its own `content` the pseudo-element
   never generates and the button renders as a bare label. It keeps the
   family's rest-at-north-east, turn-to-east behaviour, at 28px instead
   of 34px. */
.mini-cta--open::after {
  content: ""; flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background-color: #1F1E24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F9FB' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  background-size: 15px 15px;
  rotate: -45deg;
  transition: rotate var(--dur-fast) var(--ease-out-expo);
}
/* Only the button itself turns the arrow, never the card around it. */
.mini-cta--open:hover::after,
.mini-cta--open:focus-visible::after { rotate: 0deg; }

/* ---------- not open yet: the same button, with a lock ----------
   This started as frosted glass on the theory that the banners are dark
   artwork. They are not: Forkful's banner is a white phone screenshot,
   so a translucent white fill with a white label and a white disc put
   white on white three times over and the button disappeared.

   The fix is not a better tint. It is the SAME button — same solid fill,
   same ink label, same solid ink disc — with the arrow swapped for a
   lock. The fill is opaque, so it is legible on any banner regardless of
   what the artwork underneath happens to be, and the icon alone carries
   the difference between "open this" and "not yet". */
.mini-cta--soon {
  background: #F9F9FB;
  color: #1F1E24;
  /* not a link forward, so it does not offer the pointer of one */
  cursor: default;
}
.mini-card:hover .mini-cta--soon,
.mini-card:focus-visible .mini-cta--soon {
  background: #FFFFFF;
}
.mini-cta--soon::after {
  content: ""; flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background-color: #1F1E24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F9FB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V7.2a3.5 3.5 0 0 1 7 0v3.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  background-size: 15px 15px;
  /* A lock does not turn. The arrow's rest-at-north-east rotation is an
     invitation to go somewhere, which is the opposite of what this says. */
  rotate: none;
}

/* The reveal is a pointer affordance; reduced motion keeps the states
   and drops the journey. */
@media (prefers-reduced-motion: reduce) {
  .mini-cta { translate: none; transition: opacity var(--dur-fast) linear; }
  .mini-card:hover .mini-cta, .mini-card:focus-visible .mini-cta { translate: none; }
}