/*
 * Default look for GrapesJS-authored page content (the vt-* classes used
 * across web/app/admin/editor/blocks/*.ts). Loaded as a plain static file
 * from both the editor's canvas iframe (canvas.styles in
 * GrapesJsEditor.tsx) and the public site (app/(site)/layout.tsx), so
 * editing matches what visitors actually see. A communicant can still
 * override any of this per page via the Style Manager panel — these are
 * only the defaults a freshly-dropped block starts with.
 *
 * Colors and fonts are defined as local custom properties (not shared with
 * app/globals.css) and kept in sync with it by hand: the iframe canvas is a
 * separate document that only ever loads this one file, so it has no access
 * to globals.css's :root — see the "Loads the same static stylesheet..."
 * comment in GrapesJsEditor.tsx. The values are the "Aurore" direction's
 * (app/lib/theme/app_colors.dart, transcribed) — the same language the
 * product and the rest of the site wear.
 */

/* The product's type ramp, duplicated from globals.css for the same
   iframe-isolation reason as the palette: Space Grotesk for titles, Outfit
   for everything else. Same URLs, so the public site fetches each file
   once even though two stylesheets declare it. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --vt-accent: #0fa091;
  --vt-accent-2: #2bc8b4;
  --vt-on-accent: #052b26;
  --vt-foreground: #262019;
  --vt-background: #faf6ef;
  --vt-surface: #fffdfa;
  --vt-border: #e4ddd0;
  --vt-muted: #78705f;
  --vt-focus: #0b6b60;
  --vt-panel-top: rgb(255 255 255 / 0.88);
  --vt-panel-bottom: rgb(255 255 255 / 0.72);
  --vt-panel-border: rgb(58 50 40 / 0.09);
  --vt-panel-highlight: rgb(255 255 255 / 0.9);
  --vt-aurora-teal: rgb(20 184 166 / 0.12);
  --vt-aurora-coral: rgb(232 115 74 / 0.08);
  --vt-aurora-dot: rgb(58 50 40 / 0.05);
  --vt-font-sans:
    "Outfit",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --vt-font-display: "Space Grotesk", var(--vt-font-sans);
}

/* Kept in sync by hand with app/globals.css's own dark block — see this
   file's docblock above for why the two can't just share one :root. */
@media (prefers-color-scheme: dark) {
  :root {
    --vt-accent: #14b8a6;
    --vt-accent-2: #3ae0cb;
    --vt-foreground: #f2efe9;
    --vt-background: #14110e;
    --vt-surface: #221e18;
    --vt-border: #2e2a27;
    --vt-muted: #8f8779;
    --vt-focus: #47e0c8;
    --vt-panel-top: rgb(48 42 35 / 0.74);
    --vt-panel-bottom: rgb(31 26 21 / 0.74);
    --vt-panel-border: rgb(252 248 242 / 0.11);
    --vt-panel-highlight: rgb(255 255 255 / 0.06);
    --vt-aurora-teal: rgb(20 184 166 / 0.16);
    --vt-aurora-coral: rgb(232 115 74 / 0.11);
    --vt-aurora-dot: rgb(252 248 242 / 0.05);
  }
}

* {
  box-sizing: border-box;
}

:focus-visible {
  outline: 3px solid var(--vt-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

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

/* The aurora page background, painted on the canvas body so the editor
   shows a dropped block on the ground it will actually stand on. On the
   public site the (site) layout's own fixed aurora layer covers this with
   identical values, so nothing doubles up. */
body {
  background-color: var(--vt-background);
  background-image:
    radial-gradient(ellipse 135% 135% at 10% -8%, var(--vt-aurora-teal), transparent),
    radial-gradient(ellipse 108% 108% at 102% 3%, var(--vt-aurora-coral), transparent),
    radial-gradient(circle, var(--vt-aurora-dot) 0.7px, transparent 0.7px);
  background-size: auto, auto, 26px 26px;
  color: var(--vt-foreground);
  font-family: var(--vt-font-sans);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.vt-hero,
.vt-cta,
.vt-columns,
.vt-heading,
.vt-paragraph {
  font-family: var(--vt-font-sans);
}

/* Hero section — transparent, so the aurora behind it is the hero's light
   source, matching the public homepage. */
.vt-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 1.5rem;
  overflow: hidden;
  text-align: center;
}

.vt-hero h1 {
  margin: 0;
  font-family: var(--vt-font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vt-foreground);
}

.vt-hero p {
  margin: 0;
  max-width: 36rem;
  font-size: 1.125rem;
  color: var(--vt-muted);
}

/* The block's primary action: the accent gradient with the ink foreground
   and a soft glow — the direction's scarce signal. A page composed of
   several blocks should keep only one of these loud; the Style Manager can
   quiet the extras. */
.vt-hero button {
  margin-top: 0.5rem;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--vt-accent-2), var(--vt-accent));
  color: var(--vt-on-accent);
  font-family: var(--vt-font-sans);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 22px rgb(20 184 166 / 0.32);
  transition: filter 0.15s ease;
}

.vt-hero button:hover {
  filter: brightness(1.06);
}

/* Call to action */
.vt-cta {
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.vt-cta__button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--vt-accent-2), var(--vt-accent));
  color: var(--vt-on-accent);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 6px 22px rgb(20 184 166 / 0.32);
  transition: filter 0.15s ease;
}

.vt-cta__button:hover {
  filter: brightness(1.06);
}

/* Columns layout — stacks on small screens instead of squeezing side by side */
.vt-columns {
  padding: 1.5rem;
}

.vt-columns__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 640px) {
  .vt-columns {
    flex-direction: column;
  }
}

/* Heading — horizontal padding matches .vt-columns/.vt-feature-grid so content blocks line up under a full-bleed .vt-hero */
.vt-heading {
  margin: 1.5rem 0 0.75rem;
  padding: 0 1.5rem;
  font-family: var(--vt-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vt-foreground);
}

/* Paragraph */
.vt-paragraph {
  margin: 0 0 1rem;
  padding: 0 1.5rem;
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--vt-muted);
}

/*
 * Cards — shared border/shadow + hover-lift base for every card-style block
 * below (Image card, Feature card, Testimonial card, Feature grid). The
 * glass panel of the direction: a translucent two-stop fill over the
 * aurora, a hairline, one pixel of light along the top edge, radius 14
 * (the scale's card step).
 */
.vt-card {
  background-image: linear-gradient(to bottom, var(--vt-panel-top), var(--vt-panel-bottom));
  border: 1px solid var(--vt-panel-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--vt-panel-highlight),
    0 8px 24px rgb(0 0 0 / 0.12);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  font-family: var(--vt-font-sans);
}

.vt-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--vt-accent) 40%, var(--vt-panel-border));
  box-shadow:
    inset 0 1px 0 var(--vt-panel-highlight),
    0 16px 32px rgb(20 184 166 / 0.12);
}

/* Feature (text) card */
.vt-feature-card {
  padding: 1.75rem;
}

.vt-feature-card__title {
  margin: 0 0 0.5rem;
  font-family: var(--vt-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--vt-foreground);
}

.vt-feature-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--vt-muted);
}

/* Image card */
.vt-image-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0;
}

.vt-image-card__body {
  padding: 1.5rem;
}

.vt-image-card__title {
  margin: 0 0 0.375rem;
  font-family: var(--vt-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--vt-foreground);
}

.vt-image-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--vt-muted);
}

/* Testimonial card */
.vt-testimonial-card {
  padding: 1.75rem;
}

.vt-testimonial-card__quote {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--vt-foreground);
}

.vt-testimonial-card__quote::before {
  content: "\201C";
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--vt-font-display);
  font-size: 2.5rem;
  line-height: 0.5;
  color: var(--vt-accent);
}

.vt-testimonial-card__author {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vt-muted);
}

/* Feature grid — 3 feature cards ready to go, stacked on small screens */
.vt-feature-grid {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
}

.vt-feature-grid > .vt-feature-card {
  flex: 1;
}

@media (max-width: 640px) {
  .vt-feature-grid {
    flex-direction: column;
  }
}