/* ==========================================================================
   HOMEPAGE FEATURED PROJECTS — DUAL-MODE CONTROLLER
   - Desktop (>= 810px): Framer folder card stacking with sticky scroll
   - Mobile (< 810px): Responsive Folder Card with Dual-Tab Switcher (ArkCV / Swagatham)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop Folder Cards (>= 810px) — PRESERVED UNCHANGED
   -------------------------------------------------------------------------- */
@media (min-width: 810px) {
  /* Hide the mobile switcher tabs on desktop */
  .featured-project-tabs {
    display: none !important;
  }

  [data-project-count="2"] { --project-tab-notch: 81px; }
  [data-project-count="2"] [data-framer-name="Project Number"],
  [data-project-count="2"] [data-framer-name="20% Space"] {
    width: calc(50% - var(--project-tab-notch)) !important;
  }
  [data-project-count="2"] .framer-uaooh .framer-f233jw {
    justify-content: center !important;
    padding: 4px !important;
    box-sizing: border-box;
  }
  [data-project-count="2"] .framer-uaooh .framer-186ax1i {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  [data-project-count="2"] { --project-tab-notch: 44px; }
}

[data-project-count="2"] .framer-uaooh .framer-25tfn4 {
  overflow: hidden !important;
  background: #e9eef5;
}
[data-project-count="2"] #pj3 .framer-25tfn4 { background: #edf0e8; }
[data-project-count="2"] .framer-uaooh .framer-25tfn4 img {
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
}

[data-project-count="2"] :is(#pj1, #pj3) .framer-25tfn4 img {
  object-fit: contain !important;
  object-position: center !important;
}

/* Square off only the final folder tab's outer right edge on desktop */
[data-project-count="2"] [data-project-position="2"] .framer-ujfd83 {
  background: var(--token-29f9695a-09e2-4c55-ace7-e9873233e207, #fea125);
}

/* --------------------------------------------------------------------------
   Mobile Responsive Folder Card (< 810px)
   Replicates the exact desktop folder tab composition, colors and layering.
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-19ielic[data-project-count="2"],
  .draft1-selected-work {
    --featured-blue: var(--token-1892785e-8581-4826-b411-015017430ad3, rgb(54, 197, 240));
    --featured-orange: var(--token-29f9695a-09e2-4c55-ace7-e9873233e207, rgb(236, 178, 46));
    --tab-height: 46px;
    padding-inline: 16px !important;
    box-sizing: border-box !important;
    margin-bottom: 56px !important;
  }

  /* List container flex column */
  .framer-4io9df {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    position: relative !important;
    height: auto !important;
  }

  /* Authentic Dual-Tab Folder Header */
  .featured-project-tabs {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: var(--tab-height, 46px) !important;
    background: transparent !important;
    z-index: 10 !important;
    margin-bottom: -1px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .featured-project-tab {
    display: flex !important;
    align-items: stretch !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
    height: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
  }

  .featured-project-tab.tab-1 {
    flex: 1 1 50% !important;
    z-index: 2;
  }

  .featured-project-tab.tab-2 {
    flex: 1 1 auto !important;
    z-index: 1;
    margin-left: -20px !important;
  }

  /* Layering: Active tab is brought to front to seamlessly connect to card body */
  .featured-project-tabs.active-pj1 .tab-1,
  .featured-project-tab.tab-1.featured-tab-active {
    z-index: 4 !important;
  }
  .featured-project-tabs.active-pj1 .tab-2 {
    z-index: 1 !important;
  }

  .featured-project-tabs.active-pj3 .tab-1 {
    z-index: 1 !important;
  }
  .featured-project-tabs.active-pj3 .tab-2,
  .featured-project-tab.tab-2.featured-tab-active {
    z-index: 4 !important;
  }

  /* Tab Colors */
  .featured-project-tab.tab-1 .tab-body,
  .featured-project-tab.tab-1 .tab-shoulder {
    background-color: var(--featured-blue) !important;
  }

  .featured-project-tab.tab-2 .tab-body,
  .featured-project-tab.tab-2 .tab-notch-left {
    background-color: var(--featured-orange) !important;
  }

  /* Tab Text and Icons — Inter, matching desktop typography */
  .featured-project-tab .tab-body {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #111212 !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .featured-project-tab.tab-1 .tab-body {
    padding-left: 14px !important;
  }

  .featured-project-tab.tab-2 .tab-body {
    padding-left: 4px !important;
    padding-right: 14px !important;
  }

  .featured-project-tab svg {
    width: 14px !important;
    height: 14px !important;
    fill: #111212 !important;
    flex-shrink: 0 !important;
  }

  /* Tab Shoulders and Notches — Matching exact desktop SVG mask curves */
  .featured-project-tab.tab-1 .tab-shoulder {
    width: calc(var(--tab-height, 46px) * 80 / 72) !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 0 L 35.776 36 L 61.118 63 L 62.618 64.341 C 67.456 68.669 73.542 71.35 80 72 L 80 72 L 0 72 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100% !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 0 L 35.776 36 L 61.118 63 L 62.618 64.341 C 67.456 68.669 73.542 71.35 80 72 L 80 72 L 0 72 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100% !important;
  }

  .featured-project-tab.tab-2 .tab-notch-left {
    width: calc(var(--tab-height, 46px) * 80 / 72) !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 80 0 L 44.224 36 L 18.882 63 L 17.382 64.341 C 12.544 68.669 6.458 71.35 0 72 L 0 72 L 80 72 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100% !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 80 0 L 44.224 36 L 18.882 63 L 17.382 64.341 C 12.544 68.669 6.458 71.35 0 72 L 0 72 L 80 72 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100% !important;
  }

  /* Hide individual card internal tabs on mobile */
  [data-project-count="2"] .framer-4y8o6z,
  [data-project-count="2"] .framer-irv8gb {
    display: none !important;
  }

  /* Card Item Positioning */
  [data-project-count="2"] [data-project-position] {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
  }

  /* Hide non-active card completely */
  [data-project-position][hidden],
  .featured-project-tabs ~ [data-project-position][hidden] {
    display: none !important;
  }

  [data-project-position]:not([hidden]) {
    display: block !important;
  }

  [data-project-position].featured-is-active {
    animation: featuredCardFade 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  @keyframes featuredCardFade {
    0% {
      opacity: 0.7;
    }
    100% {
      opacity: 1;
    }
  }

  /* Card Body Layout */
  [data-project-count="2"] .framer-uaooh {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: clamp(16px, 4.5vw, 20px) !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Project Colors on Mobile Card Bodies */
  [data-project-count="2"] #pj1 .framer-uaooh {
    background-color: var(--featured-blue) !important;
  }
  [data-project-count="2"] #pj3 .framer-uaooh {
    background-color: var(--featured-orange) !important;
  }

  /* Responsive Composition inside Card:
     Unwrap zqpo5p so text (order 1), image mockup (order 2), and folder tags (order 3)
     reflect the exact desktop visual hierarchy */
  [data-project-count="2"] .framer-uaooh .framer-zqpo5p {
    display: contents !important;
  }

  /* 1. Text Group (Date, Title, Description, Link) */
  [data-project-count="2"] .framer-uaooh .framer-tf09wj {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-clg0ld {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-97t7mi {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Date Bullet and Label — DM Mono, 500 */
  [data-project-count="2"] .framer-uaooh .framer-w5n1wd {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    color: #111212 !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-1tdrzuz {
    width: 8px !important;
    height: 8px !important;
    background-color: #111212 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-jg01a3 p {
    font-family: var(--project-reading, 'DM Mono', monospace) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    color: #111212 !important;
    margin: 0 !important;
  }

  /* Main Title Typography — Inter Display, 500 */
  [data-project-count="2"] .framer-uaooh .framer-ce3686 {
    max-width: 100% !important;
    width: 100% !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-ce3686 h3 {
    font-family: var(--project-heading, 'Inter Display', 'Inter Display Placeholder', sans-serif) !important;
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.12 !important;
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    color: #111212 !important;
    margin: 0 !important;
  }

  /* Subtitle / Description — Inter Display, 500 */
  [data-project-count="2"] .framer-uaooh .framer-4rnzul {
    max-width: 100% !important;
    width: 100% !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-4rnzul p {
    font-family: var(--project-heading, 'Inter Display', 'Inter Display Placeholder', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    color: #111212 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Action Button */
  [data-project-count="2"] .framer-uaooh .framer-1nmyz7r-container {
    margin-top: 2px !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-1nmyz7r-container a {
    font-family: var(--project-reading, 'DM Mono', monospace) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: underline !important;
    color: #111212 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  /* 2. Mockup Presentation in Center */
  [data-project-count="2"] .framer-uaooh .framer-f233jw {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-186ax1i {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 320px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-25tfn4 {
    position: absolute !important;
    inset: 0px !important;
    overflow: hidden !important;
  }

  [data-project-count="2"] #pj1 .framer-25tfn4 {
    background: #e9eef5 !important;
  }
  [data-project-count="2"] #pj3 .framer-25tfn4 {
    background: #edf0e8 !important;
  }

  [data-project-count="2"] .framer-uaooh .framer-25tfn4 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  /* 3. Tag Pills Anchored at Bottom — Matching Desktop Composition */
  [data-project-count="2"] .framer-uaooh .framer-jethw {
    order: 3 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 4px !important;
  }
}

/* --------------------------------------------------------------------------
   Small Mobile Adjustments (<= 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .framer-19ielic[data-project-count="2"],
  .draft1-selected-work {
    --tab-height: 42px;
    padding-inline: 12px !important;
  }

  .featured-project-tab .tab-body {
    font-size: 10px !important;
    gap: 6px !important;
  }

  .featured-project-tab.tab-1 .tab-body {
    padding-left: 10px !important;
  }

  .featured-project-tab.tab-2 .tab-body {
    padding-right: 10px !important;
  }

  .featured-project-tab svg {
    width: 12px !important;
    height: 12px !important;
  }
}