/* Certificates Page Styles */

.certificates-hero {
    padding: 80px 0 45px;
    background: var(--ivory-bg);
    text-align: center;
    border-bottom: 1px solid rgba(212, 173, 96, 0.1);
    position: relative;
    overflow: hidden;
}

/* .ast-container is Astra's flex-row utility, reused here as a plain
   wrapper — without this it packs subtitle/heading/divider side by side
   instead of stacking them centered. */
.certificates-hero .ast-container {
    display: block !important;
}

html[data-design="2"] body .certificates-hero h1 {
    font-size: clamp(2.25rem, 1.5rem + 2.7vw, 4rem) !important;
    color: var(--emerald-deep);
    margin-bottom: 0;
}

/* Faint laurel-esque seal motif standing in for "our quality seal with
   thin laurel branches" — kept at low opacity so it reads as texture. */
.certificates-hero::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -70px;
    transform: translateY(-50%);
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 2px solid var(--gold-muted);
    background: radial-gradient(circle, transparent 62%, var(--emerald-deep) 63%, var(--emerald-deep) 64%, transparent 65%);
    opacity: 0.07;
    pointer-events: none;
}

@media (max-width: 991px) {
    .certificates-hero::after {
        display: none;
    }
}

/* Lightbox for "open original at full size" */
.certificate-image-wrapper {
    cursor: zoom-in;
}

.cert-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 20, 16, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
}

.cert-lightbox.is-open {
    display: flex;
}

.cert-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.cert-lightbox-close {
    position: absolute;
    top: 24px;
    right: 32px;
    color: var(--ivory-bg);
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    font-family: var(--sans-body);
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(251, 248, 241, 0.45);
    border-radius: 50%;
    background: rgba(6, 70, 53, 0.58);
}

.cert-lightbox-close:focus-visible,
.certificate-image-wrapper:focus-visible {
    outline: 3px solid var(--gold-muted);
    outline-offset: 4px;
}

/* Astra's .ast-container is a flex row. Without this reset the grid becomes
   a flex item and shrinks to its content width, collapsing the three
   certificates into a single narrow column. */
.certificates-gallery .ast-container {
    display: block !important;
}

.certificates-gallery {
    background:
        linear-gradient(180deg, rgba(212, 173, 96, 0.055), transparent 22%),
        var(--ivory-bg);
}

.certificates-grid {
    padding: clamp(58px, 7vw, 84px) 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(22px, 2.6vw, 34px);
    align-items: stretch;
}

/* Editorial archive folio: the document dominates; the caption is a compact
   label rather than a second, mostly empty card. */
.certificate-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(140, 106, 34, 0.26);
    border-radius: 24px;
    background: #fffdf9;
    box-shadow: 0 18px 44px rgba(6, 40, 30, 0.09);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.4s ease, border-color 0.4s ease;
}

.certificate-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 56px rgba(6, 40, 30, 0.15);
    border-color: var(--gold-muted);
}

.certificate-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1.414 / 1; /* A4 landscape */
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(145deg, #eee8dc 0%, #f7f2e8 100%);
    border: 0;
    border-bottom: 1px solid rgba(140, 106, 34, 0.22);
    appearance: none;
    text-align: initial;
}

.certificate-image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: clamp(14px, 1.5vw, 20px);
    transition: transform 0.5s ease;
}

.certificate-item:hover .certificate-image-wrapper img {
    transform: scale(1.04);
}

/* "Переглянути" affordance — the scans are only legible in the lightbox, so
   say so on hover instead of relying on the zoom cursor alone. */
.certificate-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(6, 70, 53, 0.94);
    color: var(--ivory-bg);
    font-family: var(--sans-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.92;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.certificate-item:hover .certificate-zoom,
.certificate-image-wrapper:focus-visible .certificate-zoom {
    opacity: 1;
    background: var(--emerald-deep);
}

/* Touch devices have no real hover (and leave it stuck after a tap), so show
   the affordance permanently there rather than by accident. */
@media (hover: none) {
    .certificate-zoom {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .certificate-item,
    .certificate-image-wrapper img,
    .certificate-zoom {
        transition: none;
    }
    .certificate-item:hover {
        transform: none;
    }
    .certificate-item:hover .certificate-image-wrapper img {
        transform: none;
    }
}

.certificate-info {
    flex: 1;
    padding: clamp(26px, 2.4vw, 34px);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(180deg, #fff 0%, #fdfaf4 100%);
}

.certificate-kicker {
    color: var(--gold-ink);
    font-family: var(--sans-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.certificate-info h3 {
    font-size: clamp(1.45rem, 1.1rem + 0.7vw, 1.85rem);
    color: var(--emerald-deep);
    margin: 0;
    line-height: 1.12;
}

.certificate-rule {
    display: none;
}

.certificate-info p {
    max-width: 34ch;
    margin: 4px 0 0;
    color: #44544d;
    font-family: var(--sans-body);
    font-size: clamp(1rem, 0.94rem + 0.2vw, 1.1rem);
    line-height: 1.58;
}

.iso-cert-section {
    padding: 100px 0;
    background: var(--emerald-deep);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Same reset as the gallery — the flex container was laying the badge,
   heading, paragraph and ISO plate out as one row. */
.iso-cert-section .ast-container {
    display: block !important;
}

/* Soft gold aura behind the panel so the flat emerald block has some depth */
.iso-cert-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 780px;
    height: 780px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(212, 173, 96, 0.13) 0%, transparent 62%);
    pointer-events: none;
}

.iso-panel {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    padding: 54px 48px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(212, 173, 96, 0.32);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.04);
}

.iso-cert-section h2 {
    color: var(--gold-muted);
    margin: 0;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem) !important;
}

.iso-panel .section-divider-gold {
    margin: 18px auto 22px;
    width: 120px;
}

.iso-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 480px;
    opacity: 0.92;
}

.iso-badge-large {
    display: block;
    margin-bottom: 18px;
    line-height: 0;
}

.iso-badge-large .badge-checkmark-img {
    width: 84px;
    height: 84px;
}

/* Standard plate: label above, code below, so "ISO 9001:2015" reads as a
   credential rather than a stray button. */
.iso-standard {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 46px;
    border: 1px solid var(--gold-muted);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.iso-standard-label {
    font-family: var(--sans-body);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ivory-bg);
    opacity: 0.65;
}

.iso-standard-code {
    color: var(--gold-muted);
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    font-family: var(--sans-body);
}

@media (max-width: 768px) {
    .certificates-hero h1 {
        font-size: 2.5rem;
    }
    .certificates-grid {
        grid-template-columns: 1fr;
        padding: 50px 0;
    }
    .iso-cert-section {
        padding: 70px 0;
    }
    .iso-panel {
        padding: 40px 24px 36px;
    }
    .iso-standard {
        padding: 16px 30px;
    }
}