/* ──────────────────────────────────────────────────────────
   FictionX – Omani Media section (`#team.fx-media`)
   4 destination cards: Press, Radio, TV, Statistics.
   No shadows on buttons per template UI rule.
   ────────────────────────────────────────────────────────── */

/* ===== Section wrapper ===== */
.fx-media{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:60px 0 70px;
    background:#fff;
}
.fx-media::before,
.fx-media::after{
    content:"";
    position:absolute;
    width:340px;height:340px;border-radius:50%;
    pointer-events:none;
    z-index:0;
}
.fx-media::before{
    top:-120px;inset-inline-start:-120px;
    background:radial-gradient(closest-side, rgba(165,19,19,.06), transparent 70%);
}
.fx-media::after{
    bottom:-140px;inset-inline-end:-140px;
    background:radial-gradient(closest-side, rgba(15,23,42,.04), transparent 70%);
}
.fx-media > .container{position:relative;z-index:1;}

/* ===== Heading & intro ===== */
.fx-media .heading.main-heading{margin-bottom:14px;}
.fx-media .heading.main-heading h4.sub-title{
    font-size:32px;font-weight:700;letter-spacing:.3px;margin:0;
}
.fx-media__intro{
    max-width:820px;
    margin:0 auto 28px;
    text-align:center;
    font-size:14.5px;line-height:1.95;color:#3a4451;
}

/* Decorative divider (cleaned-up version of template's centred icons) */
.fx-media__divider{
    text-align:center;
    padding:8px 0 28px;
}
.fx-media__divider img{opacity:.5;margin:0 3px;vertical-align:middle;}

/* ===== Cards grid ===== */
.fx-media__grid{
    display:grid;
    gap:18px;
    grid-template-columns:repeat(4, minmax(0,1fr));
}

/* ===== Card ===== */
.fx-media-card{
    position:relative;
    display:flex;flex-direction:column;
    background:#fafbfc;
    border:1px solid rgba(15,23,42,.08);
    border-radius:4px;
    text-decoration:none !important;
    color:inherit !important;
    overflow:hidden;
    isolation:isolate;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),
               border-color .35s ease,
               background .35s ease;
}
.fx-media-card:hover{
    transform:translateY(-6px);
    border-color:rgba(165,19,19,.35);
    background:#fff;
}

/* Top accent strip */
.fx-media-card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg, transparent, #a51313 30%, #a51313 70%, transparent);
    opacity:0;
    transition:opacity .35s ease;
    z-index:3;
}
.fx-media-card:hover::before{opacity:1;}

/* Media area (logo/image) */
.fx-media-card__media{
    position:relative;
    aspect-ratio:16/10;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,1), rgba(248,249,251,1)),
        repeating-linear-gradient(45deg,
            rgba(165,19,19,.025) 0 10px,
            transparent 10px 20px);
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    padding:18px;
}
@supports not (aspect-ratio:1){
    .fx-media-card__media{height:160px;}
}
.fx-media-card__img{
    max-width:78%;
    max-height:100%;
    width:auto;height:auto;
    object-fit:contain;
    transition:transform .5s cubic-bezier(.22,.61,.36,1),
               filter .4s ease;
    filter:saturate(.95);
}
.fx-media-card:hover .fx-media-card__img{
    transform:scale(1.05);
    filter:saturate(1.1);
}

/* Hover overlay with "open" CTA */
.fx-media-card__overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, rgba(165,19,19,.92), rgba(125,15,15,.94));
    color:#fff;
    opacity:0;
    transition:opacity .35s ease;
    z-index:2;
}
.fx-media-card:hover .fx-media-card__overlay{opacity:1;}

.fx-media-card__overlay-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:56px;height:56px;
    border:2px solid rgba(255,255,255,.85);
    border-radius:50%;
    font-size:18px;
    transform:scale(.85);
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.fx-media-card:hover .fx-media-card__overlay-icon{
    transform:scale(1);
}
/* CSS plus sign — avoids dependence on FontAwesome */
.fx-media-card__overlay-icon::before,
.fx-media-card__overlay-icon::after{
    content:"";
    position:absolute;
    background:#fff;
    border-radius:4px;
}
.fx-media-card__overlay-icon::before{width:18px;height:2px;}
.fx-media-card__overlay-icon::after{width:2px;height:18px;}

/* Card footer with title + arrow */
.fx-media-card__footer{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 18px;
    background:#fff;
    border-top:1px solid rgba(15,23,42,.06);
}
.fx-media-card__title{
    margin:0;
    font-size:14.5px;font-weight:700;
    color:#15202b;
    letter-spacing:.2px;
    transition:color .25s ease;
}
.fx-media-card:hover .fx-media-card__title{color:#a51313;}

/* CSS chevron — direction-aware */
.fx-media-card__arrow{
    flex-shrink:0;
    width:8px;height:8px;
    border-top:2px solid #b0b8c2;
    border-inline-end:2px solid #b0b8c2;
    transform:rotate(-135deg);
    transition:transform .3s ease,border-color .3s ease,margin .3s ease;
}
[dir="ltr"] .fx-media-card__arrow{transform:rotate(45deg);}
.fx-media-card:hover .fx-media-card__arrow{
    border-color:#a51313;
    margin-inline-end:-4px;
}

/* ===== Responsive ===== */
@media (max-width:991px){
    .fx-media{padding:50px 0 60px;}
    .fx-media .heading.main-heading h4.sub-title{font-size:26px;}
    .fx-media__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){
    .fx-media__grid{grid-template-columns:1fr;}
    .fx-media__intro{font-size:13.5px;}
    .fx-media-card__footer{padding:12px 14px;}
    .fx-media-card__title{font-size:13.5px;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-media-card,
    .fx-media-card__img,
    .fx-media-card__overlay,
    .fx-media-card__overlay-icon,
    .fx-media-card__title,
    .fx-media-card__arrow{
        transition:none !important;
    }
    .fx-media-card:hover{transform:none !important;}
    .fx-media-card:hover .fx-media-card__img{transform:none !important;}
}