/* AfganMT2 NPC contents gallery */
.af-npc-guide {
    --npc-gold: #d5a44e;
    --npc-light: #ffe8ad;
    --npc-burgundy: #5e160f;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    margin: 34px auto 42px;
    padding: 24px 18px 30px;
    color: var(--npc-light);
    background: linear-gradient(180deg, #1b0906 0%, #0b0504 100%);
    border: 2px solid #a97832;
    box-shadow: 0 0 0 5px #160704, 0 12px 30px #0009, inset 0 0 0 1px #e8c16d66;
}
.af-npc-guide::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: .24;
    background: url('../../images/background.png') center top / auto 188px repeat-y;
}
.af-npc-guide__header {
    position: relative;
    width: min(680px, 90%);
    margin: 0 auto 34px;
    padding: 12px 20px 10px;
    text-align: center;
    background: linear-gradient(100deg, #56200f, #1c0905 28%, #160704 72%, #56200f);
    border: 3px solid var(--npc-gold);
    box-shadow: 0 0 0 4px #160704, inset 0 0 0 1px #f4d18b66, 0 5px 20px #0009;
}
.af-npc-guide__header::before,
.af-npc-guide__header::after {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    content: "";
    background: #3b110a;
    border: 2px solid var(--npc-gold);
    transform: translateY(-50%) rotate(45deg);
}
.af-npc-guide__header::before { left: -12px; }
.af-npc-guide__header::after { right: -12px; }
.af-npc-guide__header h2 {
    margin: 0;
    color: var(--npc-light);
    font: 700 clamp(24px, 3vw, 34px)/1.2 Georgia, serif;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px #000;
}
.af-npc-guide__header p {
    margin: 8px 0 0;
    color: #d9b96f;
    font: 11px/1.4 Georgia, serif;
    letter-spacing: 2px;
}
.af-npc-panel {
    position: relative;
    overflow: hidden;
    margin: 0 0 26px;
    padding: 14px 18px 18px;
    border: 2px solid #9d6b2d;
    box-shadow: inset 0 0 0 1px #e5b95c88, 0 8px 18px #0009;
    background-image: linear-gradient(90deg, #160704a8, #1307049e), url('../../images/afgan-home-hero.png');
    background-size: cover;
    background-position: center 44%;
}
.af-npc-panel:last-child { margin-bottom: 0; }
.af-npc-panel--armor { background-position: center 55%; }
.af-npc-panel--weapon { background-position: center 64%; }
.af-npc-panel::before {
    position: absolute;
    inset: 7px;
    content: "";
    pointer-events: none;
    border: 1px solid #e0b35e88;
}
.af-npc-panel__title {
    position: relative;
    z-index: 1;
    width: min(340px, 72%);
    margin: 0 auto 12px;
    padding: 8px 14px;
    color: var(--npc-light);
    text-align: center;
    font: 700 20px/1.25 Georgia, serif;
    text-shadow: 0 2px 4px #000;
    background: linear-gradient(90deg, #64180f, #210905 55%, #64180f);
    border: 2px solid var(--npc-gold);
    box-shadow: 0 2px 10px #0009, inset 0 0 0 1px #f2d18355;
}
.af-npc-panel__layout {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 286px;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
}
.af-npc-panel__layout--reverse { flex-direction: row-reverse; }
.af-npc-panel__portrait {
    position: relative;
    display: flex;
    width: 48%;
    min-height: 274px;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 60%, #d18b3047, #49220e20 48%, transparent 76%);
    border-bottom: 1px solid #d6a753aa;
}
.af-npc-panel__portrait img {
    display: block;
    width: auto;
    max-width: 76%;
    height: 270px;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px #000c);
}
.af-npc-panel__shop {
    display: flex;
    width: min(42%, 330px);
    min-height: 286px;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: linear-gradient(135deg, #d39e4777, #3a1b0b 34%, #1a0b06 70%, #d39e4777);
    border: 2px solid #d5a44e;
    box-shadow: 0 0 0 4px #160704, 0 0 20px #e0a84c52, 0 8px 18px #000c;
}
.af-npc-panel__shop img {
    display: block;
    width: 100%;
    max-height: 286px;
    object-fit: contain;
    image-rendering: auto;
    border: 1px solid #f1cb7c;
}
@media (max-width: 700px) {
    .af-npc-guide { margin: 24px auto 30px; padding: 18px 10px; }
    .af-npc-guide__header { margin-bottom: 24px; }
    .af-npc-panel { padding: 12px 10px 14px; margin-bottom: 18px; }
    .af-npc-panel__layout { min-height: 230px; gap: 12px; }
    .af-npc-panel__portrait { width: 42%; min-height: 220px; }
    .af-npc-panel__portrait img { height: 215px; max-width: 90%; }
    .af-npc-panel__shop { width: min(52%, 280px); min-height: 0; padding: 4px; }
    .af-npc-panel__shop img { max-height: 250px; }
    .af-npc-panel__title { font-size: 17px; }
}
@media (max-width: 430px) {
    .af-npc-guide__header p { font-size: 9px; letter-spacing: 1px; }
    .af-npc-panel__layout { min-height: 0; gap: 9px; }
    .af-npc-panel__portrait { min-height: 180px; }
    .af-npc-panel__portrait img { height: 175px; }
    .af-npc-panel__shop { width: 56%; }
}