/**
 * Text Blocks Module - Frontend styles
 * 
 * @author    Woohoo.pl
 * @copyright 2025 Woohoo.pl
 * @license   https://opensource.org/licenses/AFL-3.0
 */

/* Base text block container */
.wh-textblock {
    box-sizing: border-box;
}

/* Base paragraph styles */
.wh-paragraph {
    box-sizing: border-box;
}

/* Responsive visibility - Desktop only */
.wh-desktop-only {
    display: block;
}

/* Responsive visibility - Mobile only */
.wh-mobile-only {
    display: none;
}

/* Mobile breakpoint (max-width: 768px) */
@media (max-width: 768px) {
    .wh-desktop-only {
        display: none !important;
    }
    
    .wh-mobile-only {
        display: block !important;
    }
}

/* Tablet adjustments (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .wh-desktop-only {
        display: block;
    }
    
    .wh-mobile-only {
        display: none;
    }
}

/* Default heading styles - can be overridden by theme */
.wh-textblock h1.wh-paragraph,
.wh-textblock h2.wh-paragraph,
.wh-textblock h3.wh-paragraph,
.wh-textblock h4.wh-paragraph,
.wh-textblock h5.wh-paragraph,
.wh-textblock h6.wh-paragraph {
    margin-top: 0;
}

.wh-textblock h1.wh-paragraph:last-child,
.wh-textblock h2.wh-paragraph:last-child,
.wh-textblock h3.wh-paragraph:last-child,
.wh-textblock h4.wh-paragraph:last-child,
.wh-textblock h5.wh-paragraph:last-child,
.wh-textblock h6.wh-paragraph:last-child,
.wh-textblock p.wh-paragraph:last-child {
    margin-bottom: 0;
}

/* Blockquote styling */
.wh-textblock blockquote.wh-paragraph {
    padding: 15px 20px;
    margin: 0 0 15px;
    border-left: 4px solid var(--wh-color-border-subtle, #ddd);
    background-color: var(--wh-color-bg-subtle, #f9f9f9);
}

/* Pre/code styling */
.wh-textblock pre.wh-paragraph {
    padding: 15px;
    margin: 0 0 15px;
    background-color: var(--wh-color-bg-subtle, #f5f5f5);
    border: 1px solid var(--wh-color-border-subtle, #ddd);
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* List styling */
.wh-textblock ul.wh-paragraph,
.wh-textblock ol.wh-paragraph {
    padding-left: 20px;
    margin: 0 0 15px;
}

.wh-textblock ul.wh-paragraph li,
.wh-textblock ol.wh-paragraph li {
    margin-bottom: 5px;
}

/* ==== 1.6.0: paragrafy strukturalne (nagłówek sekcji, karty, plakietki) — wszystko na tokenach --wh-* ==== */
.wh-tb-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--wh-space-md, 1.6rem); margin: 0 0 var(--wh-space-lg, 2.4rem); }
.wh-tb-section--center { justify-content: center; text-align: center; }
.wh-tb-section__main { display: flex; flex-direction: column; gap: var(--wh-space-sm, .8rem); }
.wh-tb-section--center .wh-tb-section__main { align-items: center; }
.wh-tb-pill { display: inline-flex; align-items: center; gap: var(--wh-space-xs, .4rem); align-self: flex-start; padding: .4rem 1.2rem; border-radius: var(--wh-radius-pill, 999px); background: var(--wh-color-bg-subtle, #f7f7f7); color: var(--wh-color-text-primary, #23272f); font-size: var(--wh-font-size-small, 1.2rem); }
.wh-tb-section--center .wh-tb-pill { align-self: center; }
.wh-tb-ico { display: inline-flex; line-height: 0; }
.wh-tb-ico svg, .wh-tb-card__ico svg { width: 1.6rem; height: 1.6rem; }
.wh-tb-section__title { margin: 0; font-family: var(--wh-font-heading, inherit); font-size: var(--wh-font-size-h2, 2.4rem); color: var(--wh-color-text-primary, #23272f); }
.wh-tb-section__title em { font-style: normal; color: var(--wh-color-primary, currentColor); }
.wh-tb-section__lead { margin: 0; max-width: 72ch; font-size: var(--wh-font-size-base, 1.6rem); color: color-mix(in srgb, var(--wh-color-text-primary, #23272f) 72%, var(--wh-color-bg-base, #fff)); }
.wh-tb-section__link { color: var(--wh-color-text-link, var(--wh-color-primary, currentColor)); font-weight: var(--wh-font-weight-medium, 500); text-decoration: none; }
.wh-tb-section__link:focus-visible, .wh-tb-card__link:focus-visible { outline: .2rem solid currentColor; outline-offset: .2rem; }
.wh-tb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: var(--wh-space-md, 1.6rem); margin: 0; padding: 0; list-style: none; }
.wh-tb-card { display: flex; flex-direction: column; gap: var(--wh-space-sm, .8rem); padding: var(--wh-space-md, 1.6rem); border: 1px solid var(--wh-color-border-subtle, #e5e5e5); border-radius: var(--wh-radius-md, 8px); background: var(--wh-color-bg-elevated, #fff); }
.wh-tb-card__nr, .wh-tb-card__tag { font-family: var(--wh-font-mono, monospace); font-size: var(--wh-font-size-small, 1.2rem); color: color-mix(in srgb, var(--wh-color-text-primary, #23272f) 70%, var(--wh-color-bg-base, #fff)); }
.wh-tb-card__title { margin: 0; font-size: var(--wh-font-size-h3, 1.8rem); color: var(--wh-color-text-primary, #23272f); }
.wh-tb-card__text { margin: 0; font-size: var(--wh-font-size-base, 1.6rem); }
.wh-tb-card__text em { font-style: normal; font-weight: var(--wh-font-weight-bold, 700); color: var(--wh-color-primary, currentColor); }
.wh-tb-card__link { margin-top: auto; color: var(--wh-color-text-link, var(--wh-color-primary, currentColor)); text-decoration: none; }
.wh-tb-chips { display: flex; flex-wrap: wrap; gap: var(--wh-space-xs, .4rem); margin: 0; padding: 0; list-style: none; }
.wh-tb-chip { padding: .3rem 1rem; border: 1px solid var(--wh-color-border-subtle, #e5e5e5); border-radius: var(--wh-radius-pill, 999px); font-size: var(--wh-font-size-small, 1.2rem); }
.wh-tb-chiprow__title { margin: 0 0 var(--wh-space-xs, .4rem); font-weight: var(--wh-font-weight-bold, 700); }
.wh-tb-chiprow__lead { margin: 0 0 var(--wh-space-sm, .8rem); }