/*
 * Public editorial: the full-bleed culmination band (2026-09-02). One
 * section per catalogue page reaches the viewport edges: the recommended
 * course, the nearest workshop, the newest article (CatalogFeature,
 * src/components/common/). Split out of public-editorial-motion.css at the
 * 400-line limit; word reveal and hero parallax stay there, the stack deck
 * moved to public-editorial-deck.css (2026-09-03). Loaded by PublicLayout for
 * every public route.
 */

/* .page-bleed lets one section inside a .page-frame reach the viewport
   edges. Below 90rem the frame fills the viewport, so the section only has
   to swallow the frame's own padding (1 / 1.5 / 2rem by breakpoint; no vw
   unit, a classic scrollbar would make 100vw overflow). From 90rem the frame
   is centred and vw is the only way to the edges. Never place it under an
   overflow: hidden ancestor: the bleed is clipped and sticky breaks. */
.page-bleed {
  width: calc(100% + 2rem);
  margin-inline: -1rem;
}

@media (min-width: 640px) {
  .page-bleed {
    width: calc(100% + 3rem);
    margin-inline: -1.5rem;
  }
}

@media (min-width: 1024px) {
  .page-bleed {
    width: calc(100% + 4rem);
    margin-inline: -2rem;
  }
}

@media (min-width: 90rem) {
  .page-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

/* CatalogFeature: the one item worth the full width (recommended course,
   nearest workshop, newest article) on the catalogue ink ground. */
.catalog-feature {
  --feature-accent: #4cae50;
  position: relative;
  margin-block: clamp(1rem, 2.5vw, 2rem) clamp(2.5rem, 5vw, 4rem);
  border-block: 1px solid rgba(21, 35, 29, 0.85);
  background: #15231d;
  color: #fffef9;
}

.catalog-feature::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 0.5rem;
  background: var(--feature-accent);
}

.catalog-feature--workshop {
  --feature-accent: #e1493f;
}

.catalog-feature--news {
  --feature-accent: #5370ff;
}

.catalog-feature__inner {
  display: grid;
  width: min(100% - 2rem, 86rem);
  margin-inline: auto;
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

/* Every cover on the site (course, workshop, article) is 16:9, so the frame
   is 16:9 too: a taller box would crop the cover's own title strip. */
.catalog-feature__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 254, 249, 0.18);
  background: #0f1a15;
}

.catalog-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-feature__placeholder {
  display: grid;
  height: 100%;
  place-items: center;
  font-size: 3rem;
}

.catalog-feature__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.catalog-feature__title {
  margin: 0;
  color: #fffef9;
  font-size: clamp(2rem, 4.2vw, 4rem);
  font-weight: 850;
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.catalog-feature__cta:focus-visible {
  outline: 3px solid #cdea81;
  outline-offset: 4px;
}

.catalog-feature__text {
  max-width: 36rem;
  margin-top: 1rem;
  color: rgba(255, 254, 249, 0.74);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.65;
}

.catalog-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  color: #cdea81;
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.78rem;
}

.catalog-feature__meta s {
  margin-left: 0.5rem;
  color: rgba(255, 254, 249, 0.5);
}

.catalog-feature__cta {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding: 0 1.4rem;
  border: 1px solid rgba(255, 254, 249, 0.28);
  border-radius: 0.55rem;
  background: #e1493f;
  color: #fff;
  font-weight: 800;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.catalog-feature__cta:hover {
  border-color: #fffef9;
  background: #fffef9;
  color: #15231d;
}

.catalog-feature__cta svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 1023px) {
  .catalog-feature__inner {
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-feature__cta {
    transition: none;
  }
}

/* .page-bleed--left: the culmination inside the LEFT column of a detail page
   (course "Ką išmoksi" + lessons, workshop schedule). The ink ground is a
   pseudo-element anchored at the block's right edge and 100vw wide, so it
   reaches the left viewport edge wherever the column sits and never covers
   the sticky pricing column on the right. isolation keeps the ground behind
   the content but above the page canvas. The shadcn colour tokens are
   flipped inside, so semantic text/border utilities read on ink without
   per-component overrides. Same rule as .page-bleed: no overflow: hidden
   ancestor (it would clip the ground and break the sticky sidebar). */
.page-bleed--left {
  --foreground: 48 100% 98%;
  --card-foreground: 48 100% 98%;
  --muted-foreground: 140 12% 78%;
  --border: 150 14% 30%;
  --card: 154 25% 11%;
  --muted: 154 20% 16%;
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  padding-right: clamp(1rem, 3vw, 2.5rem);
  color: #fffef9;
}

.page-bleed--left::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 100vw;
  background: #15231d;
}

.page-bleed--left::after {
  content: '';
  position: absolute;
  inset: 0 0 auto auto;
  width: 100vw;
  height: 0.5rem;
  background: linear-gradient(90deg, #4cae50 0 42%, #e1493f 42% 68%, #5370ff 68% 88%, #efb92f 88%);
  pointer-events: none;
}

/* One column: the block already spans the frame, so the ground is centred
   on it and reaches both viewport edges. */
@media (max-width: 1023px) {
  .page-bleed--left {
    padding-right: 0;
  }

  .page-bleed--left::before,
  .page-bleed--left::after {
    inset-inline: calc(50% - 50vw);
    width: auto;
  }
}

/* .page-bleed--tint: the light culmination band of the tool sales pages and
   /prenumerata (paper-green ground + colour rail; the /klientams booking
   block uses the same look). Sections with their own inner container keep
   it; a bare .page-section gets frame-aligned padding instead. */
.page-bleed--tint {
  position: relative;
  border-block: 1px solid rgba(21, 35, 29, 0.12);
  background: #eef3ea;
}

.page-bleed--tint::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 0.4rem;
  background: linear-gradient(90deg, #4cae50 0 42%, #e1493f 42% 68%, #5370ff 68% 88%, #efb92f 88%);
  pointer-events: none;
}

/* Sections whose parent already spans the viewport (<main> on the tool sales
   pages, the POD shell): there is no frame padding to swallow, so the band
   is simply full width at every breakpoint. */
.page-bleed.page-bleed--flush {
  width: 100%;
  margin-inline: 0;
}

.page-section.page-bleed {
  padding-inline: 1rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 640px) {
  .page-section.page-bleed {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .page-section.page-bleed {
    padding-inline: 2rem;
  }
}

@media (min-width: 90rem) {
  .page-section.page-bleed {
    /* 100vw, not 100%: the percentage would resolve against the centred frame, not the bleed */
    padding-inline: max(2rem, calc((100vw - 86rem) / 2));
  }
}