/* ===========================================
   STYLED TEXT COMPONENT
   Positioned, styled text wrapper for use
   inside columns, overlays, and landing pages.

   Usage: <!-- block:text:start:align:center:valign:bottom:size:hero -->
          Text content here...
          <!-- block:text:end -->

   Classes: st-{option}-{value}
   =========================================== */

.styled-text {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
}

/* Remove default margins from child elements */
.styled-text > p,
.styled-text > h1,
.styled-text > h2,
.styled-text > h3 {
  margin-top: 0;
}

.styled-text > p:last-child,
.styled-text > h1:last-child,
.styled-text > h2:last-child,
.styled-text > h3:last-child {
  margin-bottom: 0;
}

/* ===========================================
   HORIZONTAL ALIGNMENT — align
   =========================================== */
.st-align-left   { text-align: left; }
.st-align-center { text-align: center; }
.st-align-right  { text-align: right; }

/* ===========================================
   VERTICAL ALIGNMENT — valign
   Works when parent has defined height
   (e.g. inside a column next to an image)
   =========================================== */
.st-valign-top    { justify-content: flex-start; }
.st-valign-center { justify-content: center; }
.st-valign-bottom { justify-content: flex-end; }

/* ===========================================
   FONT SIZE — size
   =========================================== */
.st-size-small {
  font-size: 0.85rem;
  line-height: 1.5;
}

.st-size-normal {
  font-size: 1rem;
  line-height: 1.6;
}

.st-size-large {
  font-size: 1.35rem;
  line-height: 1.45;
}

.st-size-hero {
  font-size: 1.8rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.st-size-hero > p {
  margin-bottom: 0.6em;
}

.st-size-display {
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.st-size-display > p {
  margin-bottom: 0.5em;
}

/* ===========================================
   FONT WEIGHT — weight
   =========================================== */
.st-weight-light  { font-weight: 300; }
.st-weight-normal { font-weight: 400; }
.st-weight-bold   { font-weight: 700; }

/* ===========================================
   TEXT COLOR — color
   =========================================== */
.st-color-dark   { color: #1a1a2e; }
.st-color-light  { color: #ffffff; }
.st-color-muted  { color: #888; }
.st-color-accent { color: #2a9d8f; }

/* ===========================================
   LETTER SPACING — spacing
   =========================================== */
.st-spacing-tight  { letter-spacing: -0.02em; }
.st-spacing-normal { letter-spacing: 0; }
.st-spacing-wide   { letter-spacing: 0.08em; text-transform: uppercase; }

/* ===========================================
   NESTED COMPONENTS
   Override child component alignment
   =========================================== */
.st-align-center .block-button { text-align: center; }
.st-align-right .block-button { text-align: right; }

/* ===========================================
   COLUMN CONTEXT
   When styled-text is inside a column,
   fill the column height so valign works.
   =========================================== */
.block-columns .column > .styled-text {
  flex: 1;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 680px) {
  .styled-text {
    padding: 1rem;
  }

  .st-size-hero {
    font-size: 1.4rem;
  }

  .st-size-display {
    font-size: 1.8rem;
  }

  .st-size-large {
    font-size: 1.15rem;
  }
}