/**
 * /assets/css/pages/about.css
 * About-page-only layouts. Global hero, buttons, sections and typography live in shared CSS.
 */

.about-title-medium { font-size: clamp(2.7rem, 5vw, 5rem); }
.about-title-compact { font-size: clamp(2.6rem, 4.5vw, 4.6rem); }

/* =====================================================
       QUICK FACT STRIP
    ====================================================== */

    .about-facts {
      border-top:
        1px solid
        var(--border-soft);

      border-bottom:
        1px solid
        var(--border-soft);

      background:
        #0a0a0a;
    }


    .about-fact {
      height: 100%;

      padding:
        30px
        28px;

      border-right:
        1px solid
        var(--border-soft);
    }


    .about-fact:last-child {
      border-right: 0;
    }


    .about-fact-value {
      color: #fff;

      font-size: 1.45rem;

      font-weight: 800;
    }


    .about-fact-label {
      margin-top: 6px;

      color:
        rgba(255,255,255,.27);

      font-size: .58rem;

      font-weight: 700;

      letter-spacing: .20em;

      text-transform: uppercase;
    }


    /* =====================================================
       INTRO / STORY
    ====================================================== */

    .story-grid {
      display: grid;

      grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, .85fr);

      gap: 70px;

      align-items: start;
    }


    .story-copy {
      color:
        rgba(255,255,255,.50);

      font-size: .96rem;

      line-height: 1.9;
    }


    .story-copy p {
      margin-bottom: 22px;
    }


    .story-copy strong {
      color:
        rgba(255,255,255,.82);

      font-weight: 700;
    }


    .story-callout {
      position: relative;

      padding:
        35px;

      border:
        1px solid
        var(--border);

      background:
        linear-gradient(
          145deg,
          rgba(189,0,0,.055),
          rgba(255,255,255,.008)
        );
    }


    .story-callout::before {
      content: "";

      position: absolute;

      top: 0;
      left: 0;

      width: 1px;
      height: 100%;

      background:
        linear-gradient(
          to bottom,
          transparent,
          var(--red-bright),
          transparent
        );
    }


    .story-callout-label {
      color:
        var(--red-bright);

      font-size: .59rem;

      font-weight: 800;

      letter-spacing: .21em;

      text-transform: uppercase;
    }


    .story-callout-quote {
      margin-top: 20px;

      color: #fff;

      font-size:
        clamp(
          1.35rem,
          2vw,
          2rem
        );

      font-weight: 700;

      line-height: 1.4;

      letter-spacing: -.025em;
    }


    .story-callout-copy {
      margin-top: 20px;

      color:
        rgba(255,255,255,.38);

      font-size: .80rem;

      line-height: 1.75;
    }


    /* =====================================================
       WHAT RS IS
    ====================================================== */

    .identity-card {
      height: 100%;

      padding: 34px;

      border:
        1px solid
        var(--border);

      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.016),
          rgba(255,255,255,.003)
        );

      transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
    }


    .identity-card:hover {
      transform:
        translateY(-4px);

      border-color:
        var(--red-border);

      background:
        linear-gradient(
          145deg,
          rgba(189,0,0,.05),
          rgba(255,255,255,.004)
        );
    }


    .identity-icon {
      width: 45px;
      height: 45px;

      display: flex;

      align-items: center;
      justify-content: center;

      margin-bottom: 24px;

      border:
        1px solid
        var(--red-border);

      color:
        var(--red-bright);

      background:
        rgba(189,0,0,.07);

      font-size: 1.08rem;
    }


    .identity-title {
      color: #fff;

      font-size: 1.08rem;

      font-weight: 700;
    }


    .identity-copy {
      margin-top: 11px;

      color:
        rgba(255,255,255,.39);

      font-size: .83rem;

      line-height: 1.75;
    }


    /* =====================================================
       COMMUNITY VS CLAN
    ====================================================== */

    .membership-section {
      overflow: hidden;

      background:
        linear-gradient(
          to right,
          rgba(9,9,9,.98),
          rgba(9,9,9,.90),
          rgba(9,9,9,.72)
        ),
        url(
          "https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=2200&q=85"
        )
        center / cover no-repeat;
    }


    .membership-panel {
      padding:
        40px;

      border:
        1px solid
        var(--border);

      background:
        rgba(8,8,8,.80);

      backdrop-filter:
        blur(18px);
    }


    .membership-side {
      height: 100%;

      padding:
        31px;

      border:
        1px solid
        var(--border-soft);

      background:
        rgba(255,255,255,.012);
    }


    .membership-side.clan {
      background:
        linear-gradient(
          145deg,
          rgba(189,0,0,.055),
          rgba(255,255,255,.008)
        );
    }


    .membership-side-label {
      color:
        var(--red-bright);

      font-size: .58rem;

      font-weight: 800;

      letter-spacing: .20em;

      text-transform: uppercase;
    }


    .membership-side-title {
      margin-top: 13px;

      color: #fff;

      font-size: 1.38rem;

      font-weight: 800;
    }


    .membership-side-copy {
      margin-top: 11px;

      color:
        rgba(255,255,255,.41);

      font-size: .84rem;

      line-height: 1.75;
    }


    .membership-list {
      display: flex;

      flex-direction: column;

      gap: 12px;

      margin-top: 21px;
    }


    .membership-list-item {
      display: flex;

      gap: 10px;

      align-items: flex-start;

      color:
        rgba(255,255,255,.53);

      font-size: .78rem;

      line-height: 1.55;
    }


    .membership-list-item i {
      color:
        var(--red-bright);

      margin-top: 2px;
    }


    /* =====================================================
       VALUES
    ====================================================== */

    .value-row {
      display: grid;

      grid-template-columns:
        85px
        minmax(0, 1fr);

      gap: 28px;

      padding:
        28px
        0;

      border-bottom:
        1px solid
        var(--border-soft);
    }


    .value-row:first-child {
      border-top:
        1px solid
        var(--border-soft);
    }


    .value-number {
      color:
        rgba(224,0,0,.55);

      font-size: .62rem;

      font-weight: 800;

      letter-spacing: .18em;
    }


    .value-title {
      color: #fff;

      font-size: 1.18rem;

      font-weight: 700;
    }


    .value-copy {
      max-width: 820px;

      margin-top: 7px;

      color:
        rgba(255,255,255,.38);

      font-size: .84rem;

      line-height: 1.75;
    }


    /* =====================================================
       LEADERSHIP / OPERATIONS
    ====================================================== */

    .operations-panel {
      height: 100%;

      padding: 32px;

      border:
        1px solid
        var(--border);

      background:
        #0e0e0e;
    }


    .operations-icon {
      color:
        var(--red-bright);

      font-size: 1.15rem;
    }


    .operations-title {
      margin-top: 21px;

      color: #fff;

      font-size: 1.03rem;

      font-weight: 700;
    }


    .operations-copy {
      margin-top: 10px;

      color:
        rgba(255,255,255,.37);

      font-size: .81rem;

      line-height: 1.72;
    }


    /* =====================================================
       TIMELINE
    ====================================================== */

    .timeline {
      position: relative;

      margin-top: 60px;
    }


    .timeline::before {
      content: "";

      position: absolute;

      top: 0;
      bottom: 0;

      left: 126px;

      width: 1px;

      background:
        linear-gradient(
          to bottom,
          var(--red-bright),
          rgba(189,0,0,.20),
          transparent
        );
    }


    .timeline-item {
      position: relative;

      display: grid;

      grid-template-columns:
        100px
        minmax(0, 1fr);

      gap: 52px;

      padding:
        0
        0
        48px;
    }


    .timeline-date {
      padding-top: 1px;

      color:
        rgba(255,255,255,.28);

      font-size: .61rem;

      font-weight: 800;

      letter-spacing: .16em;

      text-transform: uppercase;

      text-align: right;
    }


    .timeline-content {
      position: relative;

      padding-left: 25px;
    }


    .timeline-content::before {
      content: "";

      position: absolute;

      left: -30px;
      top: 3px;

      width: 9px;
      height: 9px;

      border:
        2px solid
        var(--red-bright);

      background:
        #090909;

      transform:
        rotate(45deg);
    }


    .timeline-title {
      color: #fff;

      font-size: 1.05rem;

      font-weight: 700;
    }


    .timeline-copy {
      max-width: 820px;

      margin-top: 8px;

      color:
        rgba(255,255,255,.37);

      font-size: .82rem;

      line-height: 1.72;
    }


    /* =====================================================
       LINK PANEL
    ====================================================== */

    .about-links {
      display: grid;

      grid-template-columns:
        repeat(3, minmax(0, 1fr));

      border:
        1px solid
        var(--border);
    }


    .about-link {
      position: relative;

      min-height: 180px;

      padding:
        31px;

      border-right:
        1px solid
        var(--border-soft);

      background:
        rgba(255,255,255,.008);

      transition:
        background .2s ease;
    }


    .about-link:last-child {
      border-right: 0;
    }


    .about-link:hover {
      background:
        rgba(189,0,0,.055);
    }


    .about-link-icon {
      color:
        var(--red-bright);

      font-size: 1.05rem;
    }


    .about-link-title {
      margin-top: 25px;

      color: #fff;

      font-size: .98rem;

      font-weight: 700;
    }


    .about-link-copy {
      margin-top: 7px;

      color:
        rgba(255,255,255,.32);

      font-size: .76rem;

      line-height: 1.6;
    }


    .about-link-arrow {
      position: absolute;

      right: 25px;
      bottom: 24px;

      color:
        rgba(255,255,255,.20);

      transition:
        color .2s ease,
        transform .2s ease;
    }


    .about-link:hover
    .about-link-arrow {
      color:
        var(--red-bright);

      transform:
        translateX(4px);
    }


    /* =====================================================
       MOBILE
    ====================================================== */

    @media (max-width: 991.98px) {

      .story-grid {
        grid-template-columns:
          1fr;

        gap: 40px;
      }


      .about-links {
        grid-template-columns:
          1fr;
      }


      .about-link {
        border-right: 0;

        border-bottom:
          1px solid
          var(--border-soft);
      }


      .about-link:last-child {
        border-bottom: 0;
      }

    }


    @media (max-width: 767.98px) {
.about-fact {
        border-right: 0;

        border-bottom:
          1px solid
          var(--border-soft);
      }


      .membership-panel {
        padding:
          25px;
      }


      .value-row {
        grid-template-columns:
          1fr;

        gap: 8px;
      }


      .timeline::before {
        left: 5px;
      }


      .timeline-item {
        grid-template-columns:
          1fr;

        gap: 8px;

        padding-left: 34px;
      }


      .timeline-date {
        text-align: left;
      }


      .timeline-content {
        padding-left: 0;
      }


      .timeline-content::before {
        left: -33px;
      }

    }