/* =========================================
   ADVANTAGES & SEO & FAQ (page-specific: home page)
   ========================================= */
.advantages-wrapper {
    display: flex; justify-content: space-between; padding: 60px 0;
    border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
}
.adv-item { display: flex; align-items: center; gap: 20px; min-width: 200px; }
.adv-icon { font-size: 32px; color: var(--accent-gold); flex-shrink: 0; }
.adv-text { display: block !important; visibility: visible !important; opacity: 1 !important; }
.adv-text h4 { font-size: 14px; text-transform: uppercase; margin-bottom: 5px; color: #fff !important; font-weight: 500; display: block !important; }
.adv-text p { font-size: 12px; color: #888 !important; margin: 0; display: block !important; font-weight: 300; }

.seo-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; padding-top: 40px; border-top: 1px solid var(--border-light); margin-top: 40px; }
.seo-text-col p { margin-bottom: 25px; color: #999; font-size: 15px; line-height: 1.8; font-weight: 300; }
.seo-highlight { color: #fff; font-size: 20px; line-height: 1.5; font-weight: 500; margin-bottom: 30px; letter-spacing: 0.5px; }

.faq-wrapper { display: flex; gap: 30px; align-items: flex-start; width: 100%; }
.faq-col { flex: 1; display: flex; flex-direction: column; }
/* Flat accordion rows — same visual language as the mobile footer accordion
   (.footer-accordion-header in css/footer.css): bold uppercase title, plus
   icon at the right, a single hairline divider below, no per-item "pill"
   box/border/rounded-corner background. The .active toggle logic itself is
   unchanged (still js/components/faq.js) — only the presentation changed. */
.faq-item { border-bottom: 1px solid #151515; background: transparent; }
.faq-item:last-child { border-bottom: none; }
.faq-question {
    font-size: 15px; color: #fff; width: 100%; text-align: left; display: flex;
    justify-content: space-between; align-items: center; gap: 20px; font-weight: 500;
    letter-spacing: 1px; padding: 20px 6px; background: transparent; cursor: pointer;
    text-transform: uppercase; box-sizing: border-box;
}
/* min-width:0 overrides the flex default of "never shrink below your own
   content's natural width" — without it, a long question (see "Який
   китайський чай підійде новачку?" in the screenshot) refuses to wrap
   early enough, eating into the icon's space and visibly dragging the +
   left of where every other row's + sits. This lets the text wrap freely
   instead, so .faq-icon (flex-shrink:0 below) stays pinned at the exact
   same right-edge position on every row regardless of question length. */
.faq-question span { flex: 1; min-width: 0; }
.faq-item.active .faq-question { color: var(--accent-gold); }
.faq-icon { font-size: 14px; color: #666; transition: 0.3s; flex-shrink: 0; }
.faq-item.active .faq-icon { transform: rotate(45deg); color: var(--accent-gold); }
.faq-answer { max-height: 0; overflow: hidden; color: #999; font-size: 14px; line-height: 1.8; opacity: 0; transition: 0.5s ease; }
.faq-item.active .faq-answer { padding-bottom: 20px; max-height: 400px; opacity: 1; }
.faq-answer ul { list-style: none; padding-left: 0; margin-top: 10px; }
.faq-answer li { position: relative; padding-left: 15px; margin-bottom: 5px; }
.faq-answer li::before { content: '•'; position: absolute; left: 0; color: var(--accent-gold); }

/* =========================================
   TEA FEATURE BLOCK (home page, below FAQ)
   Three-column: big title | body copy | circular photo + caption —
   matches the reference layout the user provided (title-left, text-
   middle, round image-right with an italic caption under it).
   ========================================= */
.tea-feature { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 50px; align-items: start; }
.tf-title h2 {
    font-size: 31px; font-weight: 600; line-height: 1.2; color: #fff;
    text-transform: none; letter-spacing: normal;
}
.tf-text { color: #999; font-size: 15px; line-height: 1.8; font-weight: 300; }
.tf-text p { margin-bottom: 20px; }
.tf-text p:last-child { margin-bottom: 0; }
.tf-photo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tf-photo-circle {
    width: 100%; max-width: 240px; aspect-ratio: 1 / 1; border-radius: 50%;
    overflow: hidden; border: 1px solid var(--border-light);
}
.tf-photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.tf-caption { margin-top: 18px; font-size: 13px; font-style: italic; color: #777; line-height: 1.6; max-width: 220px; }

@media (max-width: 992px) {
    .tea-feature { grid-template-columns: 1fr; gap: 30px; }
    .tf-photo { flex-direction: row; gap: 20px; text-align: left; }
    .tf-photo-circle { max-width: 130px; flex-shrink: 0; }
    .tf-caption { margin-top: 0; max-width: none; }
}

@media (max-width: 600px) {
    .tf-title { text-align: center; }
    .tf-title h2 { font-size: 23px; }
    /* Desktop deliberately stacks the title across 3 lines (one word
       each) via <br class="tf-break"> — on mobile that reads as three
       disjointed centered fragments instead of a single heading, so the
       breaks are hidden here. The space placed right before each <br> in
       the markup stays either way, so hiding the tags just lets the
       title flow/wrap normally instead of forcing those 3 lines. */
    .tf-break { display: none; }
    .tf-photo { flex-direction: column; text-align: center; }
    .tf-photo-circle { max-width: 180px; }
    .tf-caption { margin-top: 14px; max-width: 220px; }

    /* FAQ accordion rows a touch more compact on mobile — smaller text,
       tighter row padding and icon, than the desktop/tablet default
       (.faq-question etc. earlier in this file). */
    .faq-question { font-size: 13.5px; padding: 16px 6px; letter-spacing: 0.5px; }
    .faq-icon { font-size: 12px; }
    .faq-answer { font-size: 13px; }
    .faq-item.active .faq-answer { padding-bottom: 16px; }
}