/* Homepage certificate showcase: only loaded when the admin has published items.
   One readable document at a time, never a horizontal strip of certificates. */
.lp-showcase__layout {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.55fr);
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
    padding: clamp(22px, 3.7vw, 46px);
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-line);
    background: var(--lp-mint);
    overflow: hidden;
}
.lp-showcase__intro { min-width: 0; }
.lp-showcase .lp-showcase__intro h2 {
    max-width: 400px;
    color: var(--lp-ink);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.5;
}
.lp-showcase__intro > p {
    max-width: 355px;
    margin: 12px 0 0;
    color: var(--lp-text);
    font-size: .93rem;
    line-height: 1.85;
    font-weight: 600;
}
.lp-showcase__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-start: 26px;
}
.lp-showcase__controls[hidden], .lp-showcase__dots[hidden], .lp-showcase__slide[hidden] { display: none !important; }
.lp-showcase__controls button {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--lp-line);
    border-radius: 50%;
    color: var(--lp-teal-dark);
    background: var(--lp-surface);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lp-showcase__controls button:hover {
    color: var(--lp-surface);
    background: var(--lp-teal-dark);
}
.lp-showcase__counter {
    min-inline-size: 56px;
    text-align: center;
    color: var(--lp-ink);
    font-size: .86rem;
    font-weight: 800;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}
.lp-showcase__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 15px;
}
.lp-showcase__dots button {
    inline-size: 13px;
    block-size: 13px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--lp-teal);
    background: transparent;
    cursor: pointer;
    transition: inline-size .2s ease, background .2s ease;
}
.lp-showcase__dots button[aria-current="true"] {
    inline-size: 30px;
    background: var(--lp-teal-dark);
}
.lp-showcase__slides { min-width: 0; }
.lp-showcase__slide.is-active { animation: lpShowcaseEnter .35s ease both; }
@keyframes lpShowcaseEnter {
    from { opacity: .35; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}
/* Match the issued A4 certificate: preserve its exact landscape ratio and
 * content order. The document is reflowed (not squashed with transform:scale),
 * so a narrow preview never pushes the name over the academy emblem. */
.lp-showcase__paper {
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    inline-size: 100%;
    aspect-ratio: 1123 / 794;
    min-block-size: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--lp-surface);
    border: 0;
    border-radius: 0;
    box-shadow: var(--lp-shadow);
    text-align: center;
}
.lp-showcase__paper::before,
.lp-showcase__paper::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.lp-showcase__paper::before {
    inset: 1.78cqi;
    border: 2px solid var(--lp-teal-dark);
}
.lp-showcase__paper::after {
    inset: 2.49cqi;
    border: 1px solid var(--lp-gold-text);
    opacity: .55;
}
.lp-showcase__ornaments {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: fill;
    opacity: .85;
    pointer-events: none;
    z-index: 0;
}
.lp-showcase__paper-content {
    position: absolute;
    z-index: 2;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    padding: 4.63cqi 8.02cqi 4.27cqi;
    color: var(--lp-ink);
}
.lp-showcase__brand {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: .53cqi;
    min-inline-size: 0;
    max-inline-size: 100%;
    font-family: var(--lp-font);
    font-size: clamp(12px, 2.23cqi, 25px);
    line-height: 1.5;
    font-weight: 700;
    color: var(--lp-teal-dark);
}
.lp-showcase__brand img {
    inline-size: 5.52cqi;
    block-size: 5.52cqi;
    object-fit: contain;
}
.lp-showcase__brand span {
    overflow-wrap: anywhere;
}
.lp-showcase__paper-title {
    flex: 0 0 auto;
    margin-block: 1.07cqi 1.24cqi;
    font-family: "Amiri", serif;
    font-size: 5.88cqi;
    line-height: 1.25;
    font-weight: 700;
    color: var(--lp-teal-dark);
}
.lp-showcase__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .89cqi;
    inline-size: 100%;
    min-inline-size: 0;
    font-family: "Amiri", serif;
    font-size: clamp(12px, 1.96cqi, 22px);
    line-height: 1.7;
    color: var(--lp-ink);
}
.lp-showcase__body p { margin: 0; }
.lp-showcase__recipient-label {
    max-inline-size: 100%;
    color: var(--lp-ink);
    font-weight: 400;
}
.lp-showcase .lp-showcase__recipient {
    max-inline-size: 100%;
    margin: 0;
    color: var(--lp-teal-dark);
    font-family: var(--lp-font);
    font-size: clamp(21px, 4.1cqi, 46px);
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.lp-showcase__achievement {
    max-inline-size: 100%;
    margin: 0;
    font: inherit;
    line-height: 1.7;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.lp-showcase__achievement strong,
.lp-showcase__detail {
    color: var(--lp-teal-dark);
    font-weight: 700;
}
.lp-showcase__dua {
    max-inline-size: 100%;
    margin: 0;
    color: var(--lp-muted);
    font-size: clamp(11px, 1.69cqi, 19px);
    line-height: 1.6;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.lp-showcase__date {
    flex: 0 0 auto;
    margin-block: auto 0;
    padding-block-start: .89cqi;
    color: var(--lp-muted);
    font-family: var(--lp-font);
    font-size: clamp(10px, 1.25cqi, 14px);
    font-weight: 600;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .lp-showcase__layout { grid-template-columns: minmax(0, 1fr); }
    .lp-showcase__intro > p { max-width: none; }
    .lp-showcase__controls { margin-block-start: 16px; }
    .lp-showcase__paper { max-inline-size: 760px; margin-inline: auto; }
}
@media (max-width: 560px) {
    .lp-showcase__layout { padding: 18px; gap: 17px; }
    .lp-showcase .lp-showcase__intro h2 { font-size: 1.7rem; }
    .lp-showcase__intro > p { margin-block-start: 5px; font-size: .81rem; }
    .lp-showcase__controls { margin-block-start: 12px; }
    .lp-showcase__dots { margin-block-start: 9px; }
    /* Retain the original margins, corners and hierarchy, but allow a taller
     * document for legible names and achievement text on narrow screens. */
    .lp-showcase__paper {
        aspect-ratio: auto;
        min-block-size: 450px;
    }
    .lp-showcase__paper-content {
        position: relative;
        block-size: auto;
        min-block-size: 450px;
        padding: 34px 25px 28px;
    }
    .lp-showcase__paper::before { inset: 9px; border-width: 1px; }
    .lp-showcase__paper::after { inset: 16px; }
    .lp-showcase__brand { gap: 4px; font-size: 13px; }
    .lp-showcase__brand img { inline-size: 43px; block-size: 43px; }
    .lp-showcase__paper-title {
        margin-block: 10px 14px;
        font-size: 39px;
        line-height: 1.2;
    }
    .lp-showcase__body { font-size: 14px; gap: 10px; }
    .lp-showcase__recipient-label { font-size: 14px; }
    .lp-showcase .lp-showcase__recipient { font-size: 23px; -webkit-line-clamp: unset; }
    .lp-showcase__achievement { font-size: 14px; -webkit-line-clamp: unset; }
    .lp-showcase__dua { font-size: 12px; -webkit-line-clamp: unset; }
    .lp-showcase__date { margin-block: auto 0; padding-block-start: 14px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-showcase__slide.is-active { animation: none; }
    .lp-showcase__dots button, .lp-showcase__controls button { transition: none; }
}