/* ==========================================================================
   Pixel Academy — Offer flow
   One connected visual identity for the three offer pages: the offers
   directory, the offer details page and the courses inside an offer.

   Depends on pixel-v2.css (typography), pixel-public.css (shell, buttons,
   atmosphere, header, drawer, footer) and pixel-public-pages.css (inner page
   environment, hero, bands, back link, state panels, skeletons, notes).
   It never modifies any of them and never redefines the theme system: every
   adaptive value below is derived from tokens that already flip with
   html[data-theme].

   Prefix: pxo-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Offer-flow tokens
   -------------------------------------------------------------------------- */
:root,
html[data-theme="dark"] {
  --pxo-badge-bg: rgba(9, 7, 30, 0.74);
  --pxo-badge-border: rgba(255, 255, 255, 0.18);
  --pxo-badge-ink: #ffffff;

  /* Gold is reserved for a real price and nothing else. */
  --pxo-price-ink: var(--px-gold-2);

  /* Cyan carries "already available to you": free, subscribed, granted. */
  --pxo-free-bg: rgba(34, 211, 238, 0.12);
  --pxo-free-border: rgba(34, 211, 238, 0.34);
  --pxo-free-ink: var(--px-cyan);

  --pxo-scrim: rgba(4, 3, 16, 0.74);
  --pxo-sheet-bg: linear-gradient(168deg, rgba(40, 30, 104, 0.96) 0%, rgba(9, 7, 30, 0.99) 74%);
  --pxo-sheet-border: rgba(255, 255, 255, 0.14);
  --pxo-sheet-shadow: 0 -18px 60px rgba(3, 2, 14, 0.6);

  --pxo-input-bg: rgba(255, 255, 255, 0.06);
  --pxo-input-border: rgba(255, 255, 255, 0.2);
  --pxo-input-ink: #ffffff;

  --pxo-err-bg: rgba(225, 29, 72, 0.14);
  --pxo-err-border: rgba(225, 29, 72, 0.42);
  --pxo-err-ink: #ffb7c7;
}

html[data-theme="light"] {
  --pxo-badge-bg: rgba(29, 20, 66, 0.78);
  --pxo-badge-border: rgba(255, 255, 255, 0.22);
  --pxo-badge-ink: #ffffff;

  --pxo-price-ink: #8a6209;

  --pxo-free-bg: rgba(13, 127, 147, 0.1);
  --pxo-free-border: rgba(13, 127, 147, 0.28);
  --pxo-free-ink: #0d7f93;

  --pxo-scrim: rgba(29, 20, 66, 0.44);
  --pxo-sheet-bg: linear-gradient(168deg, #ffffff 0%, #f5f1fd 100%);
  --pxo-sheet-border: rgba(74, 32, 189, 0.18);
  --pxo-sheet-shadow: 0 -18px 50px rgba(52, 28, 122, 0.22);

  --pxo-input-bg: #ffffff;
  --pxo-input-border: rgba(74, 32, 189, 0.24);
  --pxo-input-ink: #1d1442;

  --pxo-err-bg: rgba(225, 29, 72, 0.08);
  --pxo-err-border: rgba(225, 29, 72, 0.3);
  --pxo-err-ink: #a51138;
}

/* --------------------------------------------------------------------------
   2. Grid — one column on phones, two on tablets, three on desktop
   -------------------------------------------------------------------------- */
.pxo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 26px);
}

@media (min-width: 600px) {
  .pxo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .pxo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   3. Offer / course card
   The same card shape carries an offer and a course, so the three pages read
   as one flow instead of three unrelated designs.
   -------------------------------------------------------------------------- */
.pxo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
  transition: transform 260ms var(--px-ease), border-color 260ms var(--px-ease),
    box-shadow 260ms var(--px-ease);
}

.pxo-card:hover {
  transform: translateY(-4px);
  border-color: var(--pxp-card-hover-border);
  box-shadow: var(--pxp-card-lift);
}

/* A stable 16:9 plate: mismatched source images still line up in a row. */
.pxo-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--pxp-media-bg);
  border: 1px solid var(--pxp-media-border);
  border-radius: var(--px-r);
}

.pxo-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pxo-card__badge {
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--pxo-badge-ink);
  background: var(--pxo-badge-bg);
  border: 1px solid var(--pxo-badge-border);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.pxo-card__badge i {
  font-size: 0.9em;
  color: var(--px-violet-2);
}

.pxo-card__badge strong {
  font-weight: 900;
}

.pxo-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 4px 4px;
}

body.px-body .pxo-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Stage / grade chips */
.pxo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pxo-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.pxo-tag i {
  font-size: 0.9em;
  color: var(--px-violet-2);
}

/* Returned schedule values, shown exactly as they arrive */
.pxo-meta {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.pxo-meta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--px-ink-3);
}

.pxo-meta__row i {
  color: var(--px-violet-2);
}

.pxo-meta__val {
  font-weight: 700;
  color: var(--px-ink-2);
  overflow-wrap: anywhere;
}

/* Teacher line on a course card */
.pxo-card__teacher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--px-ink-3);
}

.pxo-card__teacher i {
  color: var(--px-violet-2);
}

body.px-body .pxo-teacher-link,
.pxo-teacher-name {
  font-weight: 700;
  color: var(--px-ink-2);
  overflow-wrap: anywhere;
}

body.px-body .pxo-teacher-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-bottom: 1px solid transparent;
  transition: color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease);
}

body.px-body .pxo-teacher-link:hover {
  color: var(--px-ink);
  border-bottom-color: var(--px-violet-2);
}

/* --------------------------------------------------------------------------
   4. Price / access state
   -------------------------------------------------------------------------- */
.pxo-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.4;
  color: var(--pxo-price-ink);
  overflow-wrap: anywhere;
}

.pxo-price--free,
.pxo-price--owned {
  padding: 6px 12px;
  font-size: 0.84rem;
  color: var(--pxo-free-ink);
  background: var(--pxo-free-bg);
  border: 1px solid var(--pxo-free-border);
  border-radius: 10px;
}

.pxo-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

body.px-body .pxo-card__foot .px-btn {
  flex: 1 1 auto;
  min-width: 150px;
}

@media (max-width: 380px) {
  body.px-body .pxo-card__foot .px-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   5. Offer details — composition
   -------------------------------------------------------------------------- */
.pxo-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "media"
    "body"
    "panel"
    "about";
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
}

@media (min-width: 980px) {
  .pxo-detail {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
    grid-template-areas:
      "media panel"
      "body  panel"
      "about panel";
    gap: clamp(22px, 2.6vw, 34px);
  }
}

/* The offer image is shown whole: never stretched, never cropped through the
   part of the artwork that carries the offer's own title. */
.pxo-detail__media {
  grid-area: media;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 10px;
  background: var(--pxp-media-bg);
  border: 1px solid var(--pxp-media-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

.pxo-detail__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--px-r);
}

.pxo-detail__pix {
  position: absolute;
  inset-inline-start: 14px;
  bottom: 14px;
  z-index: 2;
}

.pxo-detail__body {
  grid-area: body;
  min-width: 0;
  padding: clamp(20px, 4vw, 30px);
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

body.px-body .pxo-detail__name {
  margin: 10px 0 0;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pxo-detail__teacher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 0.92rem;
  color: var(--px-ink-3);
}

.pxo-detail__teacher i {
  color: var(--px-violet-2);
}

.pxo-detail__teacher strong {
  font-weight: 800;
  color: var(--px-ink-2);
  overflow-wrap: anywhere;
}

/* Facts — only ever rendered from returned values */
.pxo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.pxo-fact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
}

.pxo-fact i {
  color: var(--px-violet-2);
}

.pxo-fact strong {
  font-weight: 900;
  color: var(--px-ink);
  direction: ltr;
  unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   6. Purchase / access panel
   -------------------------------------------------------------------------- */
.pxo-panel {
  grid-area: panel;
  align-self: start;
  min-width: 0;
  padding: clamp(20px, 4vw, 26px);
  background: var(--pxp-panel-bg);
  border: 1px solid var(--pxp-panel-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

@media (min-width: 980px) {
  .pxo-panel {
    position: sticky;
    top: calc(var(--px-header-total) + 18px);
  }
}

.pxo-panel__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--px-ink-3);
}

body.px-body .pxo-panel__price {
  display: block;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--pxo-price-ink);
  overflow-wrap: anywhere;
}

.pxo-panel__actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

body.px-body .pxo-panel__actions .px-btn {
  width: 100%;
}

.pxo-panel__status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--pxo-free-ink);
  background: var(--pxo-free-bg);
  border: 1px solid var(--pxo-free-border);
  border-radius: var(--px-r-sm);
  overflow-wrap: anywhere;
}

body.px-body .pxo-panel__status {
  color: var(--pxo-free-ink);
}

.pxo-panel__status--warn {
  color: var(--pxp-note-ink);
  background: var(--pxp-note-bg);
  border-color: var(--pxp-note-border);
}

body.px-body .pxo-panel__status--warn {
  color: var(--pxp-note-ink);
}

.pxo-panel__status:empty {
  display: none;
}

.pxo-panel__status i {
  flex: 0 0 auto;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   7. Description
   -------------------------------------------------------------------------- */
.pxo-about {
  grid-area: about;
  min-width: 0;
  padding: clamp(20px, 4vw, 30px);
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

body.px-body .pxo-about__title {
  margin: 0 0 12px;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 800;
}

body.px-body .pxo-about__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.95;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   8. Code subscription — centred dialog on desktop, bottom sheet on phones
   -------------------------------------------------------------------------- */
body.pxo-lock {
  overflow: hidden;
}

.pxo-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pxo-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--pxo-scrim);
  opacity: 0;
  transition: opacity 240ms var(--px-ease);
}

.pxo-modal.is-open .pxo-modal__scrim {
  opacity: 1;
}

.pxo-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--pxo-sheet-bg);
  border: 1px solid var(--pxo-sheet-border);
  border-bottom: 0;
  border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
  box-shadow: var(--pxo-sheet-shadow);
  transform: translateY(18px);
  opacity: 0;
  transition: transform 280ms var(--px-ease-out), opacity 220ms var(--px-ease);
}

.pxo-modal.is-open .pxo-modal__panel {
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 640px) {
  .pxo-modal {
    align-items: center;
    padding: 20px;
  }

  .pxo-modal__panel {
    padding: 26px;
    border-bottom: 1px solid var(--pxo-sheet-border);
    border-radius: var(--px-r-lg);
  }
}

.pxo-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.px-body .pxo-modal__title {
  margin: 0;
  font-size: clamp(1.05rem, 3.6vw, 1.25rem);
  font-weight: 800;
  color: var(--px-ink);
}

body.px-body .pxo-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 1rem;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
  cursor: pointer;
  transition: color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    background-color var(--pa-t) var(--px-ease);
}

body.px-body .pxo-modal__close:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

body.px-body .pxo-modal__close[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

body.px-body .pxo-modal__lead {
  margin: 14px 0 0;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--px-ink-2);
}

.pxo-field {
  margin-top: 18px;
}

body.px-body .pxo-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--px-ink-2);
}

body.px-body .pxo-field__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--pa-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pxo-input-ink);
  background: var(--pxo-input-bg);
  border: 1px solid var(--pxo-input-border);
  border-radius: var(--px-r-sm);
  transition: border-color var(--pa-t) var(--px-ease);
}

body.px-body .pxo-field__input::placeholder {
  font-weight: 600;
  color: var(--px-ink-3);
}

body.px-body .pxo-field__input:focus {
  outline: 3px solid var(--px-cyan);
  outline-offset: 2px;
  border-color: var(--px-violet-2);
}

body.px-body .pxo-field__input[disabled] {
  opacity: 0.6;
}

.pxo-modal__confirm {
  margin-top: 18px;
}

body.px-body .pxo-modal__confirm .px-btn {
  width: 100%;
  min-height: 48px;
}

body.px-body .pxo-modal__confirm .px-btn[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

.pxo-modal__msg {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.8;
  border-radius: var(--px-r-sm);
  overflow-wrap: anywhere;
}

.pxo-modal__msg:empty {
  display: none;
  margin: 0;
  padding: 0;
}

body.px-body .pxo-modal__msg {
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
}

body.px-body .pxo-modal__msg.is-ok {
  color: var(--pxo-free-ink);
  background: var(--pxo-free-bg);
  border-color: var(--pxo-free-border);
}

body.px-body .pxo-modal__msg.is-error {
  color: var(--pxo-err-ink);
  background: var(--pxo-err-bg);
  border-color: var(--pxo-err-border);
}

/* --------------------------------------------------------------------------
   9. Skeletons for the offer flow
   -------------------------------------------------------------------------- */
.pxo-skel--media {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--px-r);
}

/* The details skeleton keeps the same composition as the loaded offer, so
   nothing jumps when the real content replaces it. */
.pxo-detail-skel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "media"
    "body"
    "panel";
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
  pointer-events: none;
}

@media (min-width: 980px) {
  .pxo-detail-skel {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
    grid-template-areas:
      "media panel"
      "body  panel";
    gap: clamp(22px, 2.6vw, 34px);
  }
}

.pxo-skel--plate {
  grid-area: media;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--px-r-lg);
}

.pxo-skel--block {
  grid-area: body;
  height: 170px;
  width: 100%;
  border-radius: var(--px-r-lg);
}

.pxo-skel--panel {
  grid-area: panel;
  height: 230px;
  width: 100%;
  border-radius: var(--px-r-lg);
}

/* --------------------------------------------------------------------------
   10. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pxo-card,
  .pxo-modal__panel,
  .pxo-modal__scrim {
    transition: none;
  }

  .pxo-card:hover {
    transform: none;
  }

  .pxo-modal__panel {
    transform: none;
  }
}