/* =========================================================
   STUDIO FEATURE BANNER
   Reusable promo for Design Language Studio (home + tools pages).
   Self-contained; does not depend on any reveal JS.
   ========================================================= */

/* 1188 - 2×24 padding = a 1140px card, the same width as the tools grid it
   sits above and below, so the page has one column edge rather than two 14px
   apart. Only pages/tools.php uses this component today. */
.studio-feature {
   max-width: 1188px;
   margin: 0 auto;
   padding: 2.5rem 1.5rem;
}

.studio-feature-card {
   position: relative;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   gap: clamp(1.5rem, 4vw, 3rem);
   align-items: center;
   background: linear-gradient(130deg, var(--color-primary), var(--color-secondary));
   border-radius: 24px;
   padding: clamp(2rem, 4vw, 3.25rem);
   color: #fff;
   box-shadow: 0 24px 60px rgba(79, 80, 145, 0.28);
   animation: studio-feature-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.studio-feature-eyebrow {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   background: rgba(255, 255, 255, 0.16);
   padding: 0.3rem 0.8rem;
   border-radius: 999px;
   margin-bottom: 1rem;
}
.studio-feature-title {
   font-size: clamp(1.5rem, 3vw, 2.1rem);
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -0.02em;
   margin: 0 0 0.75rem;
   color: #fff;
}
.studio-feature-desc {
   font-size: 1.02rem;
   line-height: 1.6;
   color: inherit;        /* inherit the card's light text — beats global p color */
   opacity: 0.92;
   margin: 0 0 1.5rem;
   max-width: 52ch;
}
.studio-feature-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.95rem;
   font-weight: 700;
   padding: 0.8rem 1.4rem;
   border-radius: 12px;
   background: #fff;
   color: var(--color-primary);
   text-decoration: none;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
   transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.studio-feature-btn i { transition: transform var(--transition-fast); }
.studio-feature-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22); }
.studio-feature-btn:hover i { transform: translateX(3px); }

/* A card with two destinations (Section Studio + Page Templates): one solid
   button plus a quieter text link, so the second option is reachable without
   competing with the first. Single-action cards keep using .studio-feature-btn
   on its own and are unaffected. */
.studio-feature-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem 1.25rem;
}
.studio-feature-link {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   font-size: 0.95rem;
   font-weight: 600;
   color: inherit;         /* the card's light text, like .studio-feature-desc */
   opacity: 0.92;
   text-decoration: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.35);
   padding-bottom: 2px;
   transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.studio-feature-link i { transition: transform var(--transition-fast); }
.studio-feature-link:hover { opacity: 1; border-bottom-color: currentColor; }
.studio-feature-link:hover i { transform: translateX(3px); }

/* Visual: the 5 token dimensions as chips */
.studio-feature-visual {
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
   align-content: center;
}
.studio-feature-chip {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   font-size: 0.85rem;
   font-weight: 600;
   padding: 0.55rem 0.9rem;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.14);
   backdrop-filter: blur(4px);
   border: 1px solid rgba(255, 255, 255, 0.18);
}
.studio-feature-chip i { opacity: 0.9; }

/* =========================================================
   SECONDARY VARIANT — .studio-feature--closing
   The tools page shows this banner twice: once above the builders grid for
   Design Language Studio, once below it for Section Studio + Page Templates.
   Two full-gradient slabs both read as "the important one", so the closing card
   keeps every structural property — same radius, same two-column layout, same
   chip cluster — and changes only its surface: a flat panel instead of a lit
   one. The button stays brand-filled: it is the last call to action on the
   page, and "secondary" should mean a quieter surface, not a quieter offer.
   ========================================================= */
.studio-feature--closing .studio-feature-card {
   background: var(--surface-primary);
   border: 1px solid var(--border-primary);
   box-shadow: var(--shadow-sm);
   color: var(--text-secondary);
}

.studio-feature--closing .studio-feature-eyebrow {
   background: var(--color-primary-soft);
   color: var(--color-primary);
}

.studio-feature--closing .studio-feature-title { color: var(--text-primary); }

.studio-feature--closing .studio-feature-desc {
   color: var(--text-secondary);
   opacity: 1;
}

.studio-feature--closing .studio-feature-btn {
   background: var(--color-primary);
   color: var(--text-inverse);
   box-shadow: var(--shadow-sm);
}
.studio-feature--closing .studio-feature-btn:hover {
   background: var(--color-primary-hover);
   box-shadow: var(--shadow-md);
}

.studio-feature--closing .studio-feature-link {
   color: var(--color-primary);
   border-bottom-color: transparent;
}
.studio-feature--closing .studio-feature-link:hover { border-bottom-color: currentColor; }

/* On the dark theme the card surface (#1E293B) is lighter than the page, and
   --color-primary lands at 3.95:1 against it — under AA for this 15px text.
   The hover tone is the same hue at 5.09:1. Light mode is already 7.49:1. */
[data-theme="dark"] .studio-feature--closing .studio-feature-link {
   color: var(--color-primary-hover);
}

.studio-feature--closing .studio-feature-chip {
   background: var(--surface-secondary);
   border-color: var(--border-primary);
   color: var(--text-secondary);
   backdrop-filter: none;
}

@keyframes studio-feature-in {
   from { opacity: 0; transform: translateY(22px); }
   to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
   .studio-feature-card { animation: none; }
}

@media (max-width: 760px) {
   .studio-feature-card { grid-template-columns: 1fr; }
   .studio-feature-visual { order: -1; }
}