/* ================================================================
   about.css – National Iran Network About Us Page.
   Only complex CSS effects that cannot be expressed with Tailwind
   utilities: repeating gradients, radial overlays, keyframe
   animations, and mask-based gradient borders.
   All other styling lives in about.php via Tailwind utilities.
   ================================================================ */

/* ----------------------------------------------------------------
   HERO – Geometric crosshatch pattern overlay
   ---------------------------------------------------------------- */
.about-hero__pattern {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            60deg,
            rgba(201, 131, 58, 0.06) 0px,
            rgba(201, 131, 58, 0.06) 1px,
            transparent 1px,
            transparent 40px
        ),
        repeating-linear-gradient(
            -60deg,
            rgba(201, 131, 58, 0.04) 0px,
            rgba(201, 131, 58, 0.04) 1px,
            transparent 1px,
            transparent 40px
        );
}

/* ----------------------------------------------------------------
   HERO – Radial vignette overlay
   ---------------------------------------------------------------- */
.about-hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 80% at 60% 50%,
        rgba(55, 65, 81, 0.3) 0%,
        rgba(55, 65, 81, 0.95) 100%
    );
}

/* ----------------------------------------------------------------
   HERO – Animated scroll cue
   ---------------------------------------------------------------- */
.about-hero__scroll {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.3);
    animation: scrollBob 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes scrollBob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* ----------------------------------------------------------------
   ORG SECTION – Circular badge with gradient ring border
   Uses mask composite to punch out the interior of the border.
   ---------------------------------------------------------------- */
.about-org__badge-wrap {
    display: flex;
    justify-content: center;
}

.about-org__badge {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(145deg, #374151 0%, #4b5563 60%);
    box-shadow:
        0 0 0 12px rgba(55, 65, 81, 0.1),
        0 0 0 24px rgba(55, 65, 81, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-org__badge::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(145deg, #c9833a, transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   RESPONSIVE – small adjustments below 900px
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
    .about-org__badge {
        width: 120px;
        height: 120px;
    }
}