/* ============================================================
   DRAGOSCAS — Inner Pages Shared Stylesheet
   Prefix: ip- (inner page)
   ============================================================ */

.ip-page {
    background: var(--dg-bg-page);
    min-height: 100vh;
}

/* ────────────────────────────────────────
   HERO / PAGE HEADER
──────────────────────────────────────── */

.ip-hero {
    padding: clamp(52px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
    position: relative;
    overflow: hidden;
}

.ip-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dg-line-mid) 30%, var(--dg-line-mid) 70%, transparent);
}

.ip-hero__inner {
    max-width: 760px;
}

.ip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: var(--fw-bd);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dg-brand-hot);
    margin-bottom: 20px;
}

.ip-eyebrow-line {
    display: inline-block;
    width: 20px;
    height: 1.5px;
    background: var(--dg-brand-hot);
    flex-shrink: 0;
}

.ip-hero__title {
    font-family: var(--ff-head);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--fw-xbd);
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--dg-ink-strong);
    margin-bottom: 20px;
}

.ip-hero__sub {
    font-family: var(--ff-body);
    font-size: clamp(1rem, 1.8vw, 1.1875rem);
    font-weight: var(--fw-reg);
    color: var(--dg-ink-muted);
    line-height: 1.68;
    max-width: 600px;
    margin-bottom: 0;
}

.ip-hero__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-body);
    font-size: 12px;
    color: var(--dg-ink-subtle);
    margin-top: 24px;
    font-weight: var(--fw-semi);
    letter-spacing: 0.02em;
}

.ip-hero__meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--dg-brand-sand);
    flex-shrink: 0;
}

/* ────────────────────────────────────────
   CONTENT LAYOUT
──────────────────────────────────────── */

.ip-content {
    padding: clamp(48px, 7vw, 80px) 0 clamp(64px, 10vw, 112px);
}

.ip-body {
    max-width: 760px;
}

/* ────────────────────────────────────────
   SECTIONS
──────────────────────────────────────── */

.ip-section {
    padding: clamp(48px, 7vw, 80px) 0;
    position: relative;
}

.ip-section + .ip-section {
    border-top: 1px solid var(--dg-line-soft);
}

.ip-section-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.ip-section-num {
    font-family: var(--ff-head);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: var(--fw-xbd);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--dg-brand-sand);
    flex-shrink: 0;
    user-select: none;
    opacity: 0.7;
    margin-top: 4px;
}

.ip-section-title-wrap {
    flex: 1;
}

.ip-section-label {
    font-family: var(--ff-body);
    font-size: 10.5px;
    font-weight: var(--fw-bd);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dg-ink-subtle);
    margin-bottom: 8px;
    display: block;
}

.ip-section-title {
    font-family: var(--ff-head);
    font-size: clamp(1.375rem, 2.8vw, 2rem);
    font-weight: var(--fw-bd);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--dg-ink-strong);
    margin-bottom: 0;
}

/* ────────────────────────────────────────
   PROSE
──────────────────────────────────────── */

.ip-prose {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: var(--fw-reg);
    color: var(--dg-ink-muted);
    line-height: 1.75;
}

.ip-prose p { margin-bottom: 1.1em; }
.ip-prose p:last-child { margin-bottom: 0; }

.ip-prose strong {
    font-weight: var(--fw-semi);
    color: var(--dg-ink-main);
}

.ip-prose a {
    color: var(--dg-brand-main);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ────────────────────────────────────────
   CALLOUT (left-stroke only, no box)
──────────────────────────────────────── */

.ip-callout {
    padding: 16px 0 16px 24px;
    border-left: 3px solid var(--dg-brand-hot);
    margin: 32px 0;
}

.ip-callout--warn {
    border-left-color: #B8860B;
}

.ip-callout--info {
    border-left-color: var(--dg-brand-main);
}

.ip-callout__label {
    font-family: var(--ff-body);
    font-size: 10.5px;
    font-weight: var(--fw-bd);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dg-brand-hot);
    margin-bottom: 8px;
    display: block;
}

.ip-callout--warn .ip-callout__label { color: #966800; }
.ip-callout--info .ip-callout__label { color: var(--dg-brand-main); }

.ip-callout__text {
    font-family: var(--ff-body);
    font-size: 15px;
    color: var(--dg-ink-strong);
    line-height: 1.68;
    margin: 0;
}

/* ────────────────────────────────────────
   ICON LIST
──────────────────────────────────────── */

.ip-icolist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.ip-icolist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--ff-body);
    font-size: 15px;
    color: var(--dg-ink-muted);
    line-height: 1.6;
}

.ip-icolist__ico {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.ip-icolist__ico img {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(35%) sepia(50%) saturate(900%) hue-rotate(340deg) brightness(85%) contrast(95%);
}

/* ────────────────────────────────────────
   TRIO — 3-column risk grid
──────────────────────────────────────── */

.ip-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin: 32px 0;
}

.ip-trio__col {
    padding: 24px 28px 24px 0;
}

.ip-trio__col + .ip-trio__col {
    border-left: 1px solid var(--dg-line-soft);
    padding-left: 28px;
    padding-right: 28px;
}

.ip-trio__col:last-child {
    padding-right: 0;
}

.ip-trio__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.ip-trio__head img {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(35%) sepia(50%) saturate(900%) hue-rotate(340deg) brightness(85%) contrast(95%);
    flex-shrink: 0;
}

.ip-trio__label {
    font-family: var(--ff-head);
    font-size: 13.5px;
    font-weight: var(--fw-bd);
    letter-spacing: -0.01em;
    color: var(--dg-ink-strong);
}

.ip-trio__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ip-trio__list li {
    font-family: var(--ff-body);
    font-size: 13.5px;
    color: var(--dg-ink-muted);
    line-height: 1.52;
    padding-left: 13px;
    position: relative;
}

.ip-trio__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dg-brand-sand);
}

/* ────────────────────────────────────────
   TOOL GRID (ANJ tools)
──────────────────────────────────────── */

.ip-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
    margin: 32px 0;
}

.ip-tool {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ip-tool__ico-wrap {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dg-brand-deep), var(--dg-brand-main));
    border-radius: 11px;
}

.ip-tool__ico-wrap img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.ip-tool__body {}

.ip-tool__name {
    font-family: var(--ff-head);
    font-size: 14.5px;
    font-weight: var(--fw-bd);
    letter-spacing: -0.01em;
    color: var(--dg-ink-strong);
    margin-bottom: 5px;
}

.ip-tool__desc {
    font-family: var(--ff-body);
    font-size: 13.5px;
    color: var(--dg-ink-muted);
    line-height: 1.58;
    margin: 0;
}

/* ────────────────────────────────────────
   RULES LIST (do/don't)
──────────────────────────────────────── */

.ip-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
    margin: 32px 0;
}

.ip-rules__col-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-family: var(--ff-head);
    font-size: 13px;
    font-weight: var(--fw-bd);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dg-ink-strong);
}

.ip-rules__col-head img {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(35%) sepia(50%) saturate(900%) hue-rotate(340deg) brightness(85%) contrast(95%);
}

/* ────────────────────────────────────────
   HOTLINE BLOCK
──────────────────────────────────────── */

.ip-hotline {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--dg-line-soft);
    border-bottom: 1px solid var(--dg-line-soft);
    margin: 40px 0;
}

.ip-hotline__icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--dg-brand-deep), var(--dg-brand-main));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ip-hotline__icon img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}

.ip-hotline__body {}

.ip-hotline__num {
    font-family: var(--ff-head);
    font-size: clamp(1.375rem, 2.8vw, 2rem);
    font-weight: var(--fw-xbd);
    letter-spacing: -0.02em;
    color: var(--dg-ink-strong);
    line-height: 1;
    margin-bottom: 5px;
}

.ip-hotline__num a {
    text-decoration: none;
    color: inherit;
}

.ip-hotline__num a:hover { color: var(--dg-brand-hot); }

.ip-hotline__note {
    font-family: var(--ff-body);
    font-size: 13px;
    color: var(--dg-ink-subtle);
    line-height: 1.5;
    margin: 0;
}

.ip-hotline__link {
    margin-left: auto;
    font-family: var(--ff-body);
    font-size: 13.5px;
    font-weight: var(--fw-semi);
    color: var(--dg-brand-main);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* ────────────────────────────────────────
   RESOURCE LIST
──────────────────────────────────────── */

.ip-resources {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 28px 0;
}

.ip-resource {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.ip-resource__ico {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--dg-brand-deep), var(--dg-brand-main));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.ip-resource__ico img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.ip-resource__name {
    font-family: var(--ff-head);
    font-size: 15px;
    font-weight: var(--fw-bd);
    color: var(--dg-ink-strong);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.ip-resource__desc {
    font-family: var(--ff-body);
    font-size: 13.5px;
    color: var(--dg-ink-muted);
    line-height: 1.58;
    margin: 0 0 5px;
}

.ip-resource__link {
    font-family: var(--ff-body);
    font-size: 12.5px;
    font-weight: var(--fw-semi);
    color: var(--dg-brand-main);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ────────────────────────────────────────
   ANJ LINK BUTTON
──────────────────────────────────────── */

.ip-anj-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: var(--fw-semi);
    color: var(--dg-brand-main);
    text-decoration: none;
    margin-top: 16px;
    transition: color 0.15s ease;
}

.ip-anj-link:hover { color: var(--dg-brand-hot); }

.ip-anj-link img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(80%) saturate(1800%) hue-rotate(348deg) brightness(90%) contrast(96%);
    transition: transform 0.15s ease;
}

.ip-anj-link:hover img { transform: translateX(3px); }

/* ────────────────────────────────────────
   FINAL CTA / ALERT
──────────────────────────────────────── */

.ip-alert {
    padding: 32px 0;
    border-top: 1px solid var(--dg-line-soft);
    margin-top: 48px;
}

.ip-alert__title {
    font-family: var(--ff-head);
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
    font-weight: var(--fw-bd);
    letter-spacing: -0.015em;
    color: var(--dg-ink-strong);
    margin-bottom: 10px;
}

.ip-alert__text {
    font-family: var(--ff-body);
    font-size: 15px;
    color: var(--dg-ink-muted);
    line-height: 1.68;
    max-width: 580px;
    margin: 0;
}

.ip-alert__text a {
    color: var(--dg-brand-main);
    font-weight: var(--fw-semi);
}

/* ────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────── */

@media (max-width: 760px) {
    .ip-trio {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ip-trio__col {
        padding: 20px 0;
    }
    .ip-trio__col + .ip-trio__col {
        border-left: none;
        border-top: 1px solid var(--dg-line-soft);
        padding-left: 0;
    }
    .ip-tools {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ip-rules {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ip-hotline {
        flex-wrap: wrap;
        gap: 16px;
    }
    .ip-hotline__link { margin-left: 0; }
    .ip-section-head { gap: 14px; }
    .ip-section-num { font-size: clamp(2.5rem, 8vw, 3.5rem); }
}

@media (max-width: 480px) {
    .ip-hotline { gap: 14px; }
    .ip-resource { gap: 14px; }
    .ip-tool { gap: 12px; }
}