/* pa-hero.css — self-contained styles for the PA Accordion Hero widget.
   No global reset, so it is safe to load inside the Elementor editor. */

:root{--navy:#174689;--deep:#152f4e;--dark:#0c1c30;--black:#060d17;--steel:#44464a;--slate:#64748b;--faint:#94a3b8;--border:#e2e8f0;--ice:#f1f5f9;--white:#fff;}
.acc-hero, .acc-hero *, .acc-hero *::before, .acc-hero *::after{box-sizing:border-box;margin:0;padding:0;}
.acc-hero a{text-decoration:none;color:inherit;}
.acc-hero img{max-width:100%;display:block;}
.acc-inner h2, .acc-v-label, .acc-tag{font-family:'Rajdhani',sans-serif;}
.acc-desc, .btn{font-family:'Inter',system-ui,sans-serif;}

    /* ===== BUTTONS ===== */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: inherit; font-weight: 700; font-size: 0.82rem;
      padding: 14px 28px; border-radius: 4px;
      border: none; cursor: pointer; transition: all 0.25s;
      letter-spacing: 0.02em;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-w { background: var(--white); color: var(--dark); }
    .btn-w:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
    .btn-o { background: transparent; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.15); }
    .btn-o:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
    .btn-n { background: var(--navy); color: var(--white); }
    .btn-n:hover { box-shadow: 0 12px 32px rgba(23,70,137,0.3); background: #1a52a0; }
    .btn-wn { background: var(--white); color: var(--navy); }
    .btn-wn:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
    .btn-go { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.2); }
    .btn-go:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }

    /* ===== VERTICAL ACCORDION HERO ===== */
    .acc-hero {
      display: flex;
      height: 85vh;
      min-height: 540px;
      overflow: hidden;
    }

    .acc-panel {
      position: relative;
      flex: 0.8;
      overflow: hidden;
      cursor: pointer;
      transition: flex 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .acc-panel.active {
      flex: 5;
      cursor: default;
    }

    /* Backgrounds */
    .acc-panel .acc-bg {
      position: absolute; inset: 0;
    }
    .acc-panel .acc-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.4,0,0.2,1), opacity 0.5s;
    }
    .acc-panel:not(.active) .acc-bg img {
      opacity: 0.4;
      transform: scale(1.05);
    }
    .acc-panel.active .acc-bg img {
      opacity: 0.75;
      transform: scale(1);
    }

    /* Gradients per panel */
    .acc-panel .acc-grad {
      position: absolute; inset: 0;
      transition: opacity 0.5s;
    }
    .acc-p1 .acc-grad { background: linear-gradient(35deg, rgba(6,13,23,0.97) 0%, rgba(6,13,23,0.9) 25%, rgba(12,28,48,0.7) 40%, rgba(40,100,190,0.35) 60%, rgba(80,150,225,0.3) 80%, rgba(110,175,240,0.25) 100%); }
    .acc-p2 .acc-grad { background: linear-gradient(35deg, rgba(6,13,23,0.97) 0%, rgba(12,28,48,0.88) 25%, rgba(23,70,137,0.55) 40%, rgba(50,120,200,0.35) 60%, rgba(80,155,230,0.28) 80%, rgba(110,175,240,0.22) 100%); }
    .acc-p3 .acc-grad { background: linear-gradient(35deg, rgba(6,13,23,0.97) 0%, rgba(12,28,48,0.88) 25%, rgba(23,70,137,0.5) 40%, rgba(50,120,200,0.3) 60%, rgba(80,155,230,0.25) 80%, rgba(110,175,240,0.2) 100%); }
    .acc-p4 .acc-grad { background: linear-gradient(35deg, rgba(6,13,23,0.97) 0%, rgba(6,13,23,0.9) 25%, rgba(21,47,78,0.65) 40%, rgba(45,110,195,0.35) 60%, rgba(75,145,220,0.28) 80%, rgba(110,175,240,0.22) 100%); }
    .acc-p5 .acc-grad { background: linear-gradient(35deg, rgba(6,13,23,0.97) 0%, rgba(23,70,137,0.85) 25%, rgba(23,70,137,0.5) 40%, rgba(50,120,200,0.3) 60%, rgba(80,150,225,0.25) 80%, rgba(110,175,240,0.2) 100%); }

    /* Collapsed: vertical label */
    .acc-collapsed {
      position: absolute; inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      transition: opacity 0.4s;
    }
    .acc-panel.active .acc-collapsed { opacity: 0; pointer-events: none; }

    .acc-v-label {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      white-space: nowrap;
      transition: color 0.3s;
      padding: 24px 0;
      user-select: none;
    }
    .acc-panel:hover .acc-v-label { color: var(--white); }

    /* Collapsed border between panels */
    .acc-panel + .acc-panel {
      border-left: 1px solid rgba(255,255,255,0.02);
    }

    /* Expanded: content */
    .acc-expanded {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: flex-end;
      opacity: 0;
      transition: opacity 0.5s 0.2s;
      pointer-events: none;
    }
    .acc-panel.active .acc-expanded {
      opacity: 1;
      pointer-events: auto;
    }

    .acc-inner {
      padding: 0 48px 56px;
      max-width: 640px;
    }
    .acc-tag {
      font-family: 'Rajdhani', sans-serif;
      color: var(--white);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .acc-tag::before {
      content: '';
      width: 32px; height: 1px;
      background: rgba(255,255,255,0.4);
    }
    .acc-inner h2 {
      color: var(--white);
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      font-weight: 700;
      line-height: 0.95;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .acc-inner h2 .thin {
      display: block;
      font-weight: 300;
      font-size: 0.52em;
      color: rgba(255,255,255,0.4);
      margin-top: 8px;
      letter-spacing: 0;
      text-transform: none;
    }
    .acc-desc {
      color: rgba(255,255,255,0.5);
      font-size: 0.92rem;
      line-height: 1.65;
      max-width: 460px;
      margin-bottom: 28px;
    }
    .acc-btns { display: flex; flex-wrap: wrap; gap: 10px; }

    /* Panel number indicator */
    .acc-num {
      position: absolute;
      top: 20px; left: 50%; transform: translateX(-50%);
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      color: rgba(255,255,255,0.2);
      letter-spacing: 0.1em;
      z-index: 4;
      transition: opacity 0.3s;
    }
    .acc-panel.active .acc-num { opacity: 0; }

    /* Collapsed panel overlay — light top, dark navy bottom */
    .acc-panel:not(.active)::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(6,13,23,0.2) 0%, rgba(12,28,48,0.25) 40%, rgba(12,28,48,0.7) 75%, rgba(6,13,23,0.85) 100%);
      transition: background 0.3s;
      z-index: 2;
    }
    .acc-panel:not(.active):hover::after {
      background: linear-gradient(180deg, rgba(6,13,23,0.1) 0%, rgba(12,28,48,0.15) 40%, rgba(12,28,48,0.55) 75%, rgba(6,13,23,0.75) 100%);
    }

    @media (max-width: 800px) {
      .acc-hero {
        flex-direction: column;
        height: auto;
        min-height: 0;
      }
      .acc-panel {
        flex: none !important;
        height: 60px;
        transition: height 0.5s cubic-bezier(0.4,0,0.2,1);
      }
      .acc-panel.active {
        height: 75vh;
        min-height: 420px;
      }
      .acc-panel + .acc-panel {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.06);
      }
      .acc-v-label {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 0.75rem;
      }
      .acc-inner { padding: 0 24px 40px; }
      .acc-num { top: auto; bottom: 8px; left: 50%; }
    }