/**
 * Homepage hero — Claude Design "WishGenerator Hero", 2026-08-19.
 *
 * Port of the design's hero-final.css with three deliberate changes:
 *
 * 1. NAMESPACED. The design uses .wrap/.top/.grid/.tile/.pill/.ask — names a
 *    WordPress theme is bound to collide with. Every selector here is scoped
 *    under .wg-hero, and the shared tile visuals carry a wg- prefix. Inner
 *    names are otherwise kept verbatim so the next import from Claude Design
 *    still diffs line by line against the original.
 *
 * 2. NO GLOBAL RESET, NO NAV. The design ships `*{margin:0}`, body/a rules and
 *    its own header. Importing those would rewrite the whole site. Our header
 *    stays; only its CTA colour moves to the new palette.
 *
 * 3. TILE VISUALS ARE SHARED, LAYOUT IS NOT. .wg-plate/.wg-ic/.wg-tl/.wg-pill
 *    are used by the homepage tiles AND the generator overlay's tiles. The
 *    LAYOUT is defined separately for each, because the design switches
 *    columns with @media — i.e. on the VIEWPORT. Inside a 600px modal on a
 *    1440px screen the desktop rule would win and try to fit nine tiles in one
 *    row. The overlay therefore keeps its own grid (see the block at the end).
 *
 * Fonts: Inter is self-hosted (inc/fonts-self-hosted.php). The design's
 * <link> to fonts.googleapis.com is deliberately not imported — that
 * render-blocking request was removed on purpose during the PageSpeed work.
 */

/* ---- palette ---------------------------------------------------------- */
/* Scoped to the hero and the tiles rather than :root: the rest of the site is
   still on the violet brand, and a global redefinition would bleed into it.
   The full-site version of this palette lives in warm-theme.css. */
.wg-hero,
.wg-tile {
  --wg-ink: #313330;
  --wg-mut: #5e5f5c;
  --wg-bd: rgba(120, 110, 95, 0.18);
  --wg-bd2: rgba(120, 110, 95, 0.32);
  --wg-sm: 0 2px 8px rgba(60, 48, 36, 0.05);
  --wg-md: 0 8px 26px rgba(60, 48, 36, 0.09);
}

.wg-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

/* ---- shell ------------------------------------------------------------ */
.wg-hero .wrap {
  inline-size: 100%;
  max-inline-size: 1240px;
  margin-inline: auto;
  padding-inline: 40px;
}
.wg-hero .top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px;
  align-items: center;
}

/* ---- copy ------------------------------------------------------------- */
.wg-hero h1 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  font-size: clamp(30px, 3.9vw, 56px);
  max-inline-size: 18ch;
  text-wrap: balance;
  color: var(--wg-ink);
}
.wg-hero .sub {
  margin: 18px 0 0;
  color: var(--wg-mut);
  font-size: clamp(14.5px, 1.25vw, 17.5px);
  line-height: 1.6;
  max-inline-size: 52ch;
  text-wrap: pretty;
}

/* ---- decorative illustration ------------------------------------------ */
/* Five stories rotate; hero-deco.js drives them. Deleting the .deco block from
   the markup is safe by design — the grid simply re-centres. */
.wg-hero .deco { justify-self: end; inline-size: 100%; max-inline-size: 440px; position: relative; }
.wg-hero .deco .slot {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.wg-hero .deco .slot:first-child { position: relative; }
.wg-hero .deco .slot.on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.wg-hero .deco .slot.frozen svg.playing * { animation-play-state: paused; }
.wg-hero .deco .slot.static { opacity: 1; visibility: visible; transition: none; }
.wg-hero .deco svg { display: block; inline-size: 100%; height: auto; overflow: visible; }
.wg-hero .deco.tapable { cursor: pointer; }

/* ---- "What shall we write?" ------------------------------------------- */
.wg-hero .ask {
  margin: 38px 0 0;
  font: 600 15.5px/1.3 Inter, system-ui, sans-serif;
  color: var(--wg-ink);
  display: flex; align-items: center; gap: 12px;
}
.wg-hero .ask::after {
  content: ""; flex: 1; block-size: 1px;
  background: linear-gradient(var(--wg-fade, 90deg), var(--wg-bd2), transparent);
}
[dir="rtl"] .wg-hero .ask::after { --wg-fade: 270deg; }

/* ---- tile visuals (SHARED with the overlay) --------------------------- */
.wg-tile {
  inline-size: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 10px; block-size: 100%;
  padding-block: 18px 16px; padding-inline: 8px;
  background: #fff;
  border: 1px solid var(--wg-bd);
  border-radius: 20px;
  box-shadow: var(--wg-sm);
  color: inherit; text-decoration: none;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s;
}
.wg-plate {
  inline-size: 60px; block-size: 60px; border-radius: 18px;
  background: color-mix(in oklab, var(--wg-c) 16%, #fff);
  display: grid; place-items: center; flex: none;
}
.wg-ic { inline-size: 44px; block-size: 44px; flex: none; }
.wg-tl {
  font: 600 13.5px/1.25 Inter, system-ui, sans-serif;
  letter-spacing: -.01em; text-align: center;
  min-block-size: 34px; display: flex; align-items: center;
  color: var(--wg-ink);
  /* min-inline-size:0 lets the label shrink with its tile; without it the item
     is propped open by its longest word and the row overflows.

     hyphens, NOT overflow-wrap:anywhere. `anywhere` breaks at any character,
     which is how "Благодарность" once wrapped to a lone "ь" on its own line.
     Hyphenation breaks at real syllable boundaries instead, and still gives the
     browser the soft-wrap opportunities it needs to compute a small enough
     min-content width.

     It is a safety net, not the mechanism: every label in all four languages
     currently fits its tile with room to spare (widest is 78px against a 100px
     inner width), so nothing should ever reach this. Keep it that way - a label
     that needs breaking is a label that is too long. */
  min-inline-size: 0; hyphens: auto;
}
.wg-pill {
  margin-block-start: auto;
  font: 600 11.5px/1 Inter, system-ui, sans-serif;
  color: var(--wg-ink);
  background: color-mix(in oklab, var(--wg-c) 20%, #fff);
  border: 1px solid color-mix(in oklab, var(--wg-c) 40%, #fff);
  border-radius: 100px; padding: 7px 13px; white-space: nowrap;
}
.wg-tile:hover .wg-pill,
.wg-tile:focus-visible .wg-pill {
  background: color-mix(in oklab, var(--wg-c) 34%, #fff);
  border-color: color-mix(in oklab, var(--wg-c) 58%, #fff);
}
/* A plane and a pencil both read backwards in a mirrored layout. */
[dir="rtl"] .wg-ic.mir { transform: scaleX(-1); }

/* ---- homepage tile layout: the arc ------------------------------------ */
.wg-hero .grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 13px; margin: 22px 0 0; padding: 0; list-style: none;
}
/* min-inline-size:0 is the fix for the real wrap bug, and it is not cosmetic.
   A flex item defaults to min-width:auto, meaning it refuses to shrink below its
   content's min-content width - for a tile, the longest unbreakable word in its
   label. In Russian the fourth tile reads "Благодарность", one 13-character
   word, which measured 118px against a 108px basis and shoved the ninth tile
   onto its own row. It was language-dependent, which is why it looked like a
   rounding fluke: English "Thanks" never triggered it.

   The pair below is what makes it safe in every language: the item may shrink
   to its basis, and the label breaks inside a word rather than propping the
   item open. Arabic and Hebrew labels are longer still, so both halves matter.

   The -1px on the basis stays as headroom against sub-pixel rounding; it is
   belt and braces, not the fix. */
.wg-hero .grid li { flex: 0 0 calc((100% - 104px) / 9 - 1px); display: flex; min-inline-size: 0; }
/* The arc is a CUSTOM PROPERTY, not a transform, and hover adds to it.
   Two reasons, both of which bit the direct port of the design:

   1. Specificity. `.wg-hero .grid li:nth-child(1) .wg-tile` scores (0,4,1) -
      the bare `li` counts - while `.wg-hero .grid .wg-tile:hover` scores
      (0,4,0). The resting rule outranked the hover rule, so on this
      breakpoint hovering a tile did nothing at all.
   2. Even with that fixed, a hover value of translateY(-22px) REPLACES the
      arc offset instead of adding to it: the raised outer tiles would sink
      by 6px on hover while the middle one leapt 27px. The lift has to be
      relative to wherever the tile rests.

   --wg-y is the resting offset; --wg-lift is what hover adds on top. */
.wg-hero .grid li:nth-child(1) .wg-tile, .wg-hero .grid li:nth-child(9) .wg-tile { --wg-y: -16px; }
.wg-hero .grid li:nth-child(2) .wg-tile, .wg-hero .grid li:nth-child(8) .wg-tile { --wg-y: -9px; }
.wg-hero .grid li:nth-child(3) .wg-tile, .wg-hero .grid li:nth-child(7) .wg-tile { --wg-y: -3px; }
.wg-hero .grid li:nth-child(4) .wg-tile, .wg-hero .grid li:nth-child(6) .wg-tile { --wg-y: 2px; }
.wg-hero .grid li:nth-child(5) .wg-tile { --wg-y: 5px; }
.wg-hero .grid .wg-tile { transform: translateY(var(--wg-y, 0px)); }
.wg-hero .grid .wg-tile:hover,
.wg-hero .grid .wg-tile:focus-visible {
  transform: translateY(calc(var(--wg-y, 0px) - var(--wg-lift, 6px)));
  box-shadow: var(--wg-md);
}
[dir="rtl"] .wg-hero .deco .slot > svg { transform: scaleX(-1); }

/* ---- responsive: the arc is a wide-screen luxury ---------------------- */
/* ≤1180 — five and four, arc off (equal specificity, wins by order) */
@media (max-width: 1180px) {
  .wg-hero .wrap { padding-inline: 28px; }
  .wg-hero .grid { gap: 13px; margin-block-start: 20px; }
  .wg-hero .grid li { flex: 0 0 calc((100% - 52px) / 5 - 1px); }
  /* Arc off: flatten the resting offset and let the shared rules above
     handle the lift, so hover keeps working without a second hover rule. */
  .wg-hero .grid li:nth-child(n) .wg-tile { --wg-y: 0px; }
  .wg-hero .deco { max-inline-size: 340px; }
  .wg-hero h1 { font-size: clamp(30px, 4.6vw, 44px); }
}
/* a lone tile on the last row spans it */
@media (max-width: 900px) and (min-width: 641px), (max-width: 430px) {
  .wg-hero .grid li:last-child { flex-basis: 100%; }
}
@media (max-width: 900px) and (min-width: 641px) {
  .wg-hero .grid li:last-child .wg-tile { flex-direction: row; justify-content: center; gap: 14px; padding-block: 12px; block-size: auto; }
  .wg-hero .grid li:last-child .wg-tl { min-block-size: 0; }
  .wg-hero .grid li:last-child .wg-pill { margin-block-start: 0; }
}
@media (max-width: 900px) {
  .wg-hero .wrap { padding-inline: 18px; }
  .wg-hero .ask { margin-block-start: 28px; font-size: 14.5px; }
  .wg-hero .grid { gap: 12px; }
  .wg-hero .grid li { flex: 0 0 calc((100% - 36px) / 4 - 1px); }
  .wg-hero .wg-plate { inline-size: 54px; block-size: 54px; border-radius: 16px; }
  .wg-hero .wg-ic { inline-size: 40px; block-size: 40px; }
  .wg-hero .wg-tile { padding-block: 16px 14px; border-radius: 18px; gap: 9px; }
  .wg-hero .wg-tl { font-size: 13px; }
}
/* ≤760 — illustration drops under the copy and stays centred */
@media (max-width: 760px) {
  .wg-hero .top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wg-hero h1 { max-inline-size: none; font-size: clamp(28px, 7vw, 38px); }
  .wg-hero .sub { max-inline-size: none; margin-block-start: 12px; }
  .wg-hero .deco { justify-self: center; margin-inline: auto; margin-block-start: 16px; max-inline-size: 300px; }
  .wg-hero .grid { margin-block-start: 16px; }
}
@media (max-width: 640px) {
  .wg-hero .grid { gap: 10px; }
  .wg-hero .grid li { flex: 0 0 calc((100% - 20px) / 3 - 1px); }
  .wg-hero .wg-tile { padding-block: 14px 12px; padding-inline: 6px; gap: 8px; border-radius: 16px; }
  .wg-hero .wg-plate { inline-size: 46px; block-size: 46px; border-radius: 14px; }
  .wg-hero .wg-ic { inline-size: 34px; block-size: 34px; }
  .wg-hero .wg-tl { font-size: 12px; min-block-size: 30px; }
  .wg-hero .wg-pill { font-size: 10.5px; padding: 6px 10px; }
  .wg-hero .deco { max-inline-size: 250px; margin-block-start: 12px; }
}
/* ≤430 — phone: two columns, ninth spans the row.
   The illustration is smaller here than the design's, and the gap above the
   tiles is tighter, for one measured reason: on a 375x812 phone the Russian
   H1 runs to three lines, and at the design's spacing the first tile row
   ended 14px under the cookie bar. Decoration yields to the CTA. */
@media (max-width: 430px) {
  .wg-hero .deco { max-inline-size: 210px; margin-block-start: 8px; }
  .wg-hero .ask { margin-block-start: 18px; }
  .wg-hero .grid { gap: 10px; }
  .wg-hero .grid li { flex: 0 0 calc((100% - 10px) / 2 - 1px); }
  .wg-hero .wg-tile { padding-block: 16px 14px; padding-inline: 10px; gap: 9px; border-radius: 18px; }
  .wg-hero .wg-plate { inline-size: 54px; block-size: 54px; border-radius: 16px; }
  .wg-hero .wg-ic { inline-size: 40px; block-size: 40px; }
  .wg-hero .wg-tl { font-size: 13.5px; min-block-size: 0; }
  .wg-hero .wg-pill { font-size: 11.5px; padding: 7px 13px; }
}
@media (max-width: 340px) {
  .wg-hero .grid { gap: 8px; }
  .wg-hero .grid li { flex: 0 0 calc((100% - 8px) / 2 - 1px); }
  .wg-hero .wg-plate { inline-size: 48px; block-size: 48px; }
  .wg-hero .wg-ic { inline-size: 36px; block-size: 36px; }
  .wg-hero .wg-tl { font-size: 12.5px; }
}
/* Short viewports: the decoration yields so the first tile row stays in frame.
   That row is the only call to action on this screen — losing it below the
   fold is the one regression this hero cannot afford. */
@media (max-height: 640px) and (max-width: 1180px) {
  .wg-hero .deco { display: none; }
  .wg-hero .ask { margin-block-start: 22px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .wg-hero h1 { font-size: clamp(21px, 3.4vw, 28px); }
  .wg-hero .sub { margin-block-start: 8px; font-size: 13px; line-height: 1.45; }
  .wg-hero .ask { margin-block-start: 16px; font-size: 13px; }
  .wg-hero .grid { gap: 9px; margin-block-start: 10px; }
  .wg-hero .grid li { flex: 0 0 calc((100% - 36px) / 5 - 1px); }
  .wg-hero .grid li:last-child .wg-tile { flex-direction: column; padding-block: 12px 10px; block-size: 100%; }
  .wg-hero .wg-tile { padding-block: 12px 10px; gap: 6px; }
  .wg-hero .wg-plate { inline-size: 42px; block-size: 42px; border-radius: 13px; }
  .wg-hero .wg-ic { inline-size: 30px; block-size: 30px; }
  .wg-hero .wg-tl { font-size: 11.5px; min-block-size: 26px; }
  .wg-hero .wg-pill { font-size: 10px; padding: 5px 9px; }
}
/* Laptop screens (1280x720 and the like). Measured against the real page,
   not the design's: our fixed header eats 78px off the top and the cookie
   bar 106px off the bottom, and at the design's spacing the middle tiles'
   "Start Now" pills ended up 16px under that bar. The row of tiles is the
   only CTA on this screen, so the illustration and the gaps give way. */
@media (max-height: 760px) and (min-width: 1181px) {
  .wg-hero h1 { font-size: clamp(30px, 3.2vw, 38px); }
  .wg-hero .sub { font-size: 15px; margin-block-start: 12px; }
  .wg-hero .ask { margin-block-start: 16px; }
  .wg-hero .grid { margin-block-start: 14px; }
  .wg-hero .deco { max-inline-size: 320px; }
}

/* ======================================================================
   OVERLAY TILES
   ======================================================================
   The generator overlay shows the same nine tiles in a 600px-wide modal.
   It reuses the visuals above but NOT the layout: every layout rule in this
   file keys off @media, which measures the viewport, not the modal. On a
   1440px screen the "nine in a row" rule would apply inside a 600px window.
   So the overlay keeps the existing .cl-grid auto-fit (minmax(150px,1fr) =
   three columns in a 600px window), and only the tile internals change.

   Every rule below is written as .cl-grid X - two classes - on purpose. The
   overlay's tiles carry BOTH .cl-tile and .wg-tile, and .cl-tile (create-lite
   .css) sets several of the same properties. Which of two single-class rules
   wins is decided by load order, and the order differs by page: on the
   homepage create-lite.css is enqueued after this file, while everywhere else
   the launcher injects it at runtime, i.e. later still. Rather than depend on
   that, these rules outrank .cl-tile by specificity and behave the same
   everywhere. */
.cl-grid .wg-tile {
  justify-content: flex-start;
  gap: 9px;
  border-radius: 18px;
  border-color: var(--wg-bd);
  padding-block: 16px 14px;
  box-shadow: var(--wg-sm);
}
.cl-grid .wg-plate { inline-size: 48px; block-size: 48px; border-radius: 15px; }
.cl-grid .wg-ic { inline-size: 36px; block-size: 36px; }
.cl-grid .wg-tl { min-block-size: 0; font-size: 13.5px; }
.cl-grid .wg-tile:hover,
.cl-grid .wg-tile:focus-visible { transform: translateY(-4px); box-shadow: var(--wg-md); }

/* ======================================================================
   HEADER CTA
   ======================================================================
   The one piece of site chrome that moves to the new palette, because it
   sits directly above the hero: a violet gradient pill over a page whose
   first screen is entirely warm reads as a leftover from another design.

   Scoped to the two header containers rather than .btn-primary itself.
   .btn-primary is used across the account, pricing and article pages; the
   agreed scope for production is the hero, the overlay tiles and this
   button. The full-site version of the palette is warm-theme.css, which is
   a local preview behind a flag. */
.header-actions .btn-primary,
.mobile-nav-actions .btn-primary {
  background: #bd5638;
  box-shadow: 0 10px 22px -8px rgba(189, 86, 56, .5);
}
.header-actions .btn-primary:hover,
.mobile-nav-actions .btn-primary:hover {
  background: #a94a2e;
  box-shadow: 0 14px 28px -8px rgba(189, 86, 56, .6);
}