/* =========================================
   ABOUT PAGE (about.html) — company story / philosophy page
   page-header/breadcrumbs/page-title are intentionally redefined here
   rather than shared, matching the existing per-page convention (see
   css/account.css, css/product.css, css/blog-page.css). main.section-padding
   (not plain .section-padding) is deliberate — see the identical note in
   css/blog-page.css: it out-specifies css/responsive.css's mobile
   ".section-padding { padding-top: 50px }" so this page stays tight under
   the header on mobile too, without touching the plain-class usages on
   index.html that should keep that 50px value.
   ========================================= */
main.section-padding { padding-top: 10px; padding-bottom: 60px; }

.page-header { padding: 10px 0 20px; border-bottom: 1px solid var(--border-light); margin-bottom: 40px; }
.breadcrumbs {
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: #888;
    margin-bottom: 15px; flex-wrap: wrap;
}
.breadcrumbs a { color: #888; transition: 0.3s; }
.breadcrumbs a:hover { color: var(--accent-gold); }
.breadcrumbs i { font-size: 9px; color: #555; }
.breadcrumbs span { color: #ccc; }
.page-title { font-size: clamp(22px, 1.2vw + 17.7px, 32px); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: #fff; }
.page-subtitle { color: #999; font-size: 15px; margin-top: 15px; line-height: 1.6; }

.about-section { margin-bottom: 80px; }
/* Vertical rhythm for everything inside .about-section: one consistent gap
   between any two direct children, regardless of what type they are (hero,
   heading, list, prose block, video). This replaces the previous approach
   of each block type carrying its own margin-bottom (40px/60px/80px) plus
   ad-hoc inline styles on a couple of paragraphs — that mix was exactly
   why the gaps looked inconsistent throughout the page. A section heading
   gets extra breathing room above it via the second rule. */
.about-section > * + * { margin-top: 48px; }
.about-section > h3.block-title { margin-top: 84px; }

.about-hero { display: flex; flex-direction: column; gap: 30px; }
.about-hero-image {
    width: 100%; height: 400px; border-radius: 12px; overflow: hidden;
    background: #111; border: 1px solid var(--border-light);
}
.about-hero-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); }
.about-hero-text { max-width: 1000px; }
.about-hero-title { font-size: clamp(26px, 1.4vw + 21px, 38px); font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 20px; line-height: 1.2; }
.about-hero-title span { color: var(--accent-gold); }
.about-hero-desc { font-size: 16px; color: #aaa; line-height: 1.8; }

.block-title {
    font-size: 26px; font-weight: 600; color: #fff; text-transform: uppercase;
    margin-bottom: 0; display: flex; align-items: center; gap: 15px;
}
.block-title::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

/* Intro sentence that sits between a .block-title and the list/grid it
   introduces — own class instead of the inline styles this used to carry,
   so its spacing/typography follows the same rhythm as everything else. */
.about-intro { color: #999; font-size: 16px; line-height: 1.7; max-width: 800px; }

/* Bullet lists used across the longer "чому обирають нас" / "що ви
   знайдете" / "як обрати чай" sections — same gold-dot marker style as
   css/blog-page.css's .article-body li, kept as its own class rather than
   reused directly since it lives in a different content container here. */
.about-list { list-style: none; }
.about-list li {
    position: relative; padding-left: 22px; margin-bottom: 16px; color: #aaa;
    font-size: 16px; line-height: 1.7;
}
.about-list li:last-child { margin-bottom: 0; }
.about-list li::before { content: '•'; position: absolute; left: 0; color: var(--accent-gold); font-weight: bold; }
.about-list li strong { color: var(--accent-gold); font-weight: 500; }
.about-list.two-col { columns: 2; column-gap: 40px; }
.about-list.two-col li { break-inside: avoid; }

.structure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.s-card { position: relative; }
.s-card-title { font-size: 19px; font-weight: 500; color: #fff; margin-bottom: 15px; text-transform: uppercase; }
.s-card-text { font-size: 14px; color: #999; line-height: 1.7; }

.history-article { font-size: 16px; line-height: 1.8; color: #aaa; max-width: 1000px; }
.history-article p { margin-bottom: 25px; }
.history-article p:last-child { margin-bottom: 0; }
.history-article strong { color: var(--accent-gold); font-size: 18px; margin-right: 5px; }

@media (max-width: 1024px) {
    .structure-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .about-hero-image { height: 220px; }
    .block-title { font-size: 18px; }
    .about-list.two-col { columns: 1; }
}