/* About page section composition.
   ---------------------------------------------------------------------------
   The shared pieces this page uses — .eyebrow, .landing-slot and its branded
   empty state, and the .trust-* band — live in assets/css/brand-blocks.css,
   which index.html loads too. Only what is specific to this page is here.

   Loads AFTER style.css and brand-blocks.css, so the overrides below win.
   ------------------------------------------------------------------------ */

/* The lead image slot. 4:3 matches the column it sits in; the ratio itself is
   declared in brand-blocks.css keyed off the slot name, because the storefront
   CSP drops inline style attributes. */
.about__lead.landing-slot {
  border-radius: 10px;
}

/* ---- How it works -------------------------------------------------------
   Replaces the theme's vape-shop fulfilment promises ("Free delivery",
   "180 Days Return", a photograph of someone vaping). Four plain statements,
   no icons: the theme's feature-icon1-4.png are generic e-commerce glyphs
   (delivery van, shield, headset, return arrow) that mean nothing for a
   download, and the brand has no icon set of its own. Type carries it. */
.how-area {
  padding-top: clamp(48px, 8vw, 100px);
  padding-bottom: clamp(48px, 8vw, 100px);
}
.how-grid {
  display: grid;
  gap: clamp(24px, 4vw, 36px);
  grid-template-columns: 1fr;
}
.how-item {
  padding-top: 22px;
  border-top: 2px solid var(--color-text);
}
.how-item h4 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 8px;
}
.how-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
.how-item a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (min-width: 576px) {
  .how-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .how-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Blog teaser --------------------------------------------------------
   Deliberately has no thumbnails. The three images this section used were all
   grey dimension placeholders ("457X431" twice, "400X260"), and there is no
   blog data model to pull real ones from — every article is hardcoded markup
   in blog.html. A clean text list is an honest teaser; a grey box with its own
   pixel dimensions printed on it is not. */
.blog-teaser {
  padding-top: clamp(48px, 8vw, 100px);
  padding-bottom: clamp(48px, 8vw, 100px);
}
.blog-teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.blog-teaser__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border);
}
.blog-teaser__list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
}
.blog-teaser__list h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 10px 0 0;
}
.blog-teaser__list h3 a {
  color: var(--color-text);
}
.blog-teaser__list h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 768px) {
  .blog-teaser__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 32px;
  }
  .blog-teaser__list li {
    border-bottom: 0;
  }
}