/* INTERVIEW CARD */
.interview-card {
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:48px;
    margin-bottom:30px;
    padding:42px;
    border:1px solid var(--border);
    border-radius:24px;
    background:#fff;
    box-shadow:0 15px 42px rgba(28,43,61,.06);
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.interview-card:hover {
    transform:translateY(-3px);
    border-color:rgba(22,140,200,.3);
    box-shadow:0 22px 50px rgba(28,43,61,.08);
}

/* PROFILE */
.interview-profile {
    padding-right:35px;
    border-right:1px solid var(--border);
}

.profile-image {
    width:100%;
    aspect-ratio:4/5;
    margin-bottom:24px;
    overflow:hidden;
    border-radius:18px;
    background:#eef2f5;
}

.profile-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    pointer-events:none;
}

.profile-label,
.cta-label {
    display:block;
    margin-bottom:11px;
    color:var(--section-light);
    font-size:12px;
    font-weight:800;
    letter-spacing:.15em;
}

.profile-info h2 {
    margin:0 0 6px;
    color:var(--section-text);
    font-size:23px;
    font-weight:900;
    letter-spacing:-.5px;
}

.profile-info>p {
    margin:0;
    color:var(--section-sub);
    font-size:14px;
}

.profile-tags {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:20px;
}

.profile-tags span {
    padding:7px 10px;
    border-radius:7px;
    background:var(--section-soft);
    color:var(--section-main);
    font-size:11px;
    font-weight:800;
}

.profile-result {
    margin-top:25px;
    padding-top:21px;
    border-top:1px solid var(--border);
}

.profile-result>span {
    display:block;
    margin-bottom:7px;
    color:var(--section-light);
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.profile-result strong {
    color:var(--section-text);
    font-size:15px;
    font-weight:800;
    line-height:1.5;
}

/* CONTENT */
.interview-content {
    min-width:0;
}

.interview-quote {
    position:relative;
    padding:4px 0 30px;
    margin-bottom:31px;
    border-bottom:1px solid var(--border);
}

.quote-mark {
    position:absolute;
    top:-22px;
    left:-9px;
    color:#e8f3f9;
    font-size:86px;
    font-family:Georgia,serif;
    font-weight:900;
    line-height:1;
    pointer-events:none;
}

.interview-quote h3 {
    position:relative;
    z-index:1;
    margin:0;
    color:var(--section-main);
    font-size:27px;
    font-weight:900;
    line-height:1.55;
    letter-spacing:-.8px;
    word-break:keep-all;
}

/* Q&A */
.interview-question {
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:18px;
    margin-bottom:30px;
}

.interview-question:last-child {
    margin-bottom:0;
}

.question-number {
    padding-top:2px;
    color:var(--section-light);
    font-size:13px;
    font-weight:900;
}

.question-content h4 {
    margin:0 0 10px;
    color:var(--section-text);
    font-size:18px;
    font-weight:800;
    line-height:1.55;
    word-break:keep-all;
}

.question-content p {
    margin:0;
    color:var(--section-sub);
    font-size:15px;
    line-height:1.85;
    word-break:keep-all;
}

/* CTA */
.interview-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:45px;
    margin-top:45px;
    padding:45px 48px;
    border-radius:22px;
    background:
        radial-gradient(circle at 90% 10%,rgba(22,140,200,.38),transparent 35%),
        linear-gradient(135deg,var(--section-main),#131d48);
    box-shadow:0 20px 48px rgba(32,43,104,.15);
}

.cta-label {
    color:#70cef4;
}

.interview-cta h3 {
    margin:0 0 8px;
    color:#fff;
    font-size:25px;
    font-weight:900;
    line-height:1.45;
    letter-spacing:-.7px;
}

.interview-cta p {
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:14px;
    line-height:1.75;
    word-break:keep-all;
}

.interview-cta-button {
    flex:0 0 auto;
    min-height:54px;
    display:flex;
    align-items:center;
    gap:22px;
    padding:0 23px;
    border-radius:10px;
    background:#fff;
    color:var(--section-main);
    font-size:14px;
    font-weight:800;
    text-decoration:none;
    transition:.23s ease;
}

.interview-cta-button>span {
    font-size:20px;
    transition:.23s ease;
}

.interview-cta-button:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.interview-cta-button:hover>span {
    transform:translateX(4px);
}

.profile-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#202b68,#168cc8);
    color:#fff;
    font-size:14px;
    font-weight:900;
    letter-spacing:.15em;
}

/* TABLET */
@media(max-width:900px) {
    .interview-page {
        padding:42px 0 80px;
    }

    .interview-card {
        grid-template-columns:220px minmax(0,1fr);
        gap:35px;
        padding:34px;
    }

    .interview-profile {
        padding-right:28px;
    }

    .interview-quote h3 {
        font-size:24px;
    }
}

/* MOBILE */
@media(max-width:700px) {
    .interview-page {
        padding:36px 0 70px;
    }

    .interview-card {
        grid-template-columns:1fr;
        gap:28px;
        margin-bottom:18px;
        padding:24px 20px;
        border-radius:18px;
    }

    .interview-profile {
        display:grid;
        grid-template-columns:110px minmax(0,1fr);
        column-gap:18px;
        align-items:start;
        padding:0 0 25px;
        border-right:0;
        border-bottom:1px solid var(--border);
    }

    .profile-image {
        grid-row:1 / 5;
        width:110px;
        margin:0;
        border-radius:14px;
    }

    .profile-info {
        align-self:end;
    }

    .profile-info h2 {
        font-size:20px;
    }

    .profile-tags {
        margin-top:13px;
    }

    .profile-result {
        margin-top:15px;
        padding-top:15px;
    }

    .interview-quote {
        padding-bottom:24px;
        margin-bottom:25px;
    }

    .quote-mark {
        top:-15px;
        font-size:65px;
    }

    .interview-quote h3 {
        font-size:21px;
    }

    .interview-question {
        grid-template-columns:35px minmax(0,1fr);
        gap:10px;
        margin-bottom:25px;
    }

    .question-content h4 {
        font-size:15px;
    }

    .question-content p {
        font-size:14px;
        line-height:1.8;
    }

    .interview-cta {
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
        margin-top:30px;
        padding:32px 24px;
        border-radius:18px;
    }

    .interview-cta h3 {
        font-size:22px;
    }

    .interview-cta p {
        font-size:13px;
    }

    .interview-cta-button {
        width:100%;
        justify-content:space-between;
    }
}

@media(max-width:420px) {
    .interview-profile {
        grid-template-columns:95px minmax(0,1fr);
        column-gap:14px;
    }

    .profile-image {
        width:95px;
    }

    .profile-tags span {
        padding:6px 8px;
        font-size:10px;
    }

    .interview-quote h3 {
        font-size:19px;
    }
}