/* AfganMT2 feature gallery: layered burgundy and gold, with raised 3D frames. */
.af-showcase {
    --show-gold: #d6a54c;
    --show-cream: #ffebba;
    --show-wine: #65170f;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 42px -12px 48px;
    padding: 24px 18px 30px;
    color: var(--show-cream);
    background: radial-gradient(ellipse at 50% 0%, #4a1b0d 0%, #1a0906 43%, #0c0403 100%);
    border: 2px solid #aa7830;
    box-shadow: 0 0 0 5px #180705, 0 18px 40px #000b, inset 0 0 0 1px #f3d08366;
}
.af-showcase::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: .2;
    background: url('../../images/background.png') center top / auto 188px repeat-y;
}
.af-showcase__header {
    position: relative;
    display: flex;
    width: min(760px, 94%);
    min-height: 84px;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 auto 34px;
    padding: 13px 26px;
    text-align: center;
    background: linear-gradient(105deg, #77351a 0%, #2a0e07 22%, #180704 50%, #2a0e07 78%, #77351a 100%);
    border: 3px solid var(--show-gold);
    box-shadow: 0 7px 0 #2a0b06, 0 13px 24px #000a, inset 0 0 0 2px #f2d18155, inset 0 0 22px #cf8b2833;
    transform: perspective(800px) rotateX(1deg);
}
.af-showcase__header h2 { margin: 0; color: var(--show-cream); font: 700 clamp(25px, 3vw, 35px)/1.1 Georgia,serif; letter-spacing: 2px; text-shadow: 0 3px 4px #000,0 0 15px #e5a63a55; }
.af-showcase__header p { margin: 7px 0 0; color: #d7b36e; font: 11px Georgia,serif; letter-spacing: 2px; }
.af-showcase__ornament { color: #f4cf7f; font-size: 23px; text-shadow: 0 0 10px #f5bc55; }
.af-feature {
    position: relative;
    margin: 0 0 28px;
    padding: 17px 18px 19px;
    background: linear-gradient(135deg, #3a170d 0%, #160805 48%, #321107 100%);
    border: 1px solid #b98437;
    box-shadow: 0 7px 0 #210906, 0 15px 24px #000a, inset 0 0 0 1px #f0cc775c, inset 0 0 28px #d68f2a19;
    transform: perspective(1400px) rotateX(.35deg);
    transition: transform .25s ease, box-shadow .25s ease;
}
.af-feature:hover { transform: perspective(1400px) translateY(-3px) rotateX(.6deg); box-shadow: 0 10px 0 #210906, 0 22px 30px #000b, inset 0 0 0 1px #f0cc7777; }
.af-feature::before { position:absolute; inset:6px; z-index:0; content:""; pointer-events:none; border:1px solid #d3a04c66; }
.af-feature__heading { position:relative; z-index:2; display:flex; align-items:center; gap:13px; margin:0 0 14px; padding:8px 12px; background:linear-gradient(90deg,#741a10,#250a06 55%,#54150d); border:1px solid var(--show-gold); box-shadow:0 4px 0 #260904,inset 0 0 0 1px #f4d48a55; }
.af-feature__heading span { display:grid; width:30px; height:30px; place-items:center; color:#311006; font:bold 13px Georgia,serif; background:linear-gradient(145deg,#fff0bb,#c99539); border:2px solid #714318; border-radius:50%; box-shadow:0 2px 5px #0009; }
.af-feature__heading h3 { margin:0; color:var(--show-cream); font:700 20px/1.2 Georgia,serif; letter-spacing:.7px; text-shadow:0 2px 4px #000; }
.af-feature__heading h3 small { color:#d7b76f; font-size:12px; }
.af-feature__heading i { flex:1; height:1px; background:linear-gradient(90deg,#d1a14d,transparent); }
.af-event-layout { position:relative; min-height:432px; padding:12px 8px; background:linear-gradient(90deg,#120705f5 0%,#1d0906e8 48%,#1b08055c 72%,#16060466 100%),url('../../images/afgan-home-hero.png') right center/cover no-repeat; border:1px solid #9d6e32; box-shadow:inset 0 0 35px #000c,0 5px 0 #220905; }
.af-event-list { position:relative; z-index:1; display:grid; gap:8px; width:min(62%,590px); margin:0; padding:3px; list-style:none; }
.af-event-list li { display:flex; min-height:58px; align-items:center; gap:15px; padding:7px 14px; color:#ffebba; font:700 16px/1.25 Georgia,serif; background:linear-gradient(105deg,#682015,#311009 67%,#1b0805); border:1px solid #d2a14b; box-shadow:0 4px 0 #220906,0 7px 10px #0009,inset 0 0 0 1px #f1cc7955; transition:transform .2s,filter .2s; }
.af-event-list li:hover { transform:translateX(5px) translateY(-2px); filter:brightness(1.2); }
.af-event-icon { display:grid; flex:0 0 38px; height:38px; place-items:center; color:#ffe5a5; font:700 21px Georgia,serif; background:radial-gradient(circle at 30% 25%,#8a491d,#331006 68%); border:2px solid #d8a84f; border-radius:50%; box-shadow:0 0 12px #efb94355,inset 0 0 0 2px #160704; }
.af-feature__layout { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-around; gap:26px; padding:10px 18px 18px; }
.af-feature__layout--reverse { flex-direction:row-reverse; }
.af-feature__copy { position:relative; display:flex; width:43%; min-height:260px; flex-direction:column; align-items:flex-start; justify-content:center; padding:25px 24px; background:linear-gradient(145deg,#6b2514,#2b0d07 45%,#130605); border:1px solid #d2a34f; box-shadow:0 8px 0 #210906,0 14px 20px #000b,inset 0 0 0 1px #f5d88b55,inset 0 0 35px #efb34a1c; transform:perspective(900px) rotateY(-2deg); }
.af-feature__layout--reverse .af-feature__copy { transform:perspective(900px) rotateY(2deg); }
.af-feature__copy::before,.af-feature__copy::after { position:absolute; width:15px; height:15px; content:""; border:2px solid #e0b55d; transform:rotate(45deg); background:#391108; }
.af-feature__copy::before { top:10px; left:10px; }.af-feature__copy::after { right:10px; bottom:10px; }
.af-feature__copy p { margin:0; color:#f6e5bd; font:17px/1.75 Georgia,serif; text-shadow:0 1px 3px #000; }
.af-feature__copy strong { color:#ffe296; }
.af-feature__art { position:relative; width:min(43%,390px); margin:0; padding:7px; background:linear-gradient(145deg,#e2b95f,#7d471c 12%,#210b06 50%,#c58a35); border:1px solid #f0cf82; box-shadow:12px 14px 0 -7px #280b06,0 20px 28px #000d,inset 0 0 0 1px #fff0bc; transform:perspective(1200px) rotateY(2deg) rotateX(.7deg); }
.af-feature__layout--reverse .af-feature__art { transform:perspective(1200px) rotateY(-2deg) rotateX(.7deg); }
.af-feature__art img { display:block; width:100%; height:auto; border:1px solid #d3a656; box-shadow:0 5px 12px #000a; }
.af-feature__sigil,.af-feature__seal,.afgan-brand-stamp,.af-final-wordmark { display:inline-flex; align-items:center; justify-content:center; min-width:115px; min-height:45px; margin-top:20px; padding:8px 15px; color:#ffedbd; text-align:center; font:700 13px/1.15 Georgia,serif; letter-spacing:1px; background:linear-gradient(145deg,#7b2314,#300d07); border:1px solid #e2b653; box-shadow:0 4px 0 #260905,0 8px 14px #0009,inset 0 0 0 1px #f7da9155; }
.af-feature__sigil { min-width:58px; font:36px Georgia,serif; }
.af-feature__seal--green { color:#c7ff9e; border-color:#79c75b; box-shadow:0 0 18px #5afa4f55,0 4px 0 #15320c; }
@media(max-width:760px) {
    .af-showcase { margin:30px -8px; padding:18px 10px; }
    .af-showcase__header { gap:10px; min-height:70px; padding:10px; }
    .af-showcase__header p { font-size:9px; letter-spacing:1px; }
    .af-feature { padding:12px 10px 15px; margin-bottom:20px; }
    .af-feature__heading h3 { font-size:17px; }
    .af-event-layout { min-height:0; padding:9px; background-position:68% center; }
    .af-event-list { width:76%; gap:6px; }
    .af-event-list li { min-height:51px; padding:5px 9px; gap:9px; font-size:13px; }
    .af-event-icon { flex-basis:31px; height:31px; font-size:17px; }
    .af-feature__layout,.af-feature__layout--reverse { gap:15px; padding:8px 3px 12px; }
    .af-feature__copy { width:46%; min-height:215px; padding:17px 15px; }
    .af-feature__copy p { font-size:14px; line-height:1.6; }
    .af-feature__art { width:46%; padding:5px; }
}
@media(max-width:480px) {
    .af-event-list { width:100%; }
    .af-event-layout { background-image:linear-gradient(90deg,#120705ee,#1d0906e8),url('../../images/afgan-home-hero.png'); background-position:65% center; }
    .af-event-list li { font-size:12px; }
    .af-feature__layout,.af-feature__layout--reverse { flex-direction:column; }
    .af-feature__copy,.af-feature__art { width:min(100%,370px); }
    .af-feature__copy { min-height:140px; transform:none!important; }
    .af-feature__art,.af-feature__layout--reverse .af-feature__art { transform:none; }
}