/* ==========================================================================
   AI Portfolio Plugin — Frontend Styles
   
   ALL colours and fonts live in CSS custom properties on .aip-wrapper.
   Site owners can override any variable in their theme stylesheet without
   touching this file.  The defaults here are intentionally neutral so the
   portfolio inherits the vibe of whatever site it's embedded in.
   ========================================================================== */

/* ---- Custom Properties (theme tokens) ---- */
.aip-wrapper {
    --aip-primary:          #3b82f6;          /* hero CTA, active buttons */
    --aip-primary-hover:    #2563eb;
    --aip-primary-text:     #fff;

    --aip-accent:           #2563eb;          /* links, toggle text, bullet dashes */
    --aip-bg:               transparent;
    --aip-card-bg:          #f3f4f6;          /* light grey card fills */
    --aip-card-border:      #e5e7eb;          /* visible borders on light bg */
    --aip-text:             #1f2937;          /* dark body text */
    --aip-text-muted:       #6b7280;          /* readable muted text on light bg */
    --aip-text-on-dark:     #1f2937;          /* used inside modals — overridden below */

    --aip-success-bg:       #dcfce7;
    --aip-success-border:   #bbf7d0;
    --aip-success-text:     #15803d;          /* darker green, readable on light */

    --aip-warn-bg:          #fef9c3;
    --aip-warn-border:      #fde047;
    --aip-warn-text:        #a16207;          /* dark amber, readable on light */

    --aip-error-bg:         #fee2e2;
    --aip-error-border:     #fecaca;
    --aip-error-text:       #dc2626;

    /* Modal keeps its own dark theme — intentional, looks good as a floating panel */
    --aip-modal-bg:         #1e1e1e;
    --aip-modal-overlay:    rgba(0, 0, 0, 0.55);
    --aip-modal-input-bg:   rgba(255,255,255,0.07);
    --aip-modal-text:       #fff;
    --aip-modal-text-muted: rgba(255,255,255,0.55);
    --aip-modal-card-bg:    rgba(255,255,255,0.06);
    --aip-modal-card-border:rgba(255,255,255,0.12);

    --aip-font-heading:     inherit;
    --aip-font-body:        inherit;
    --aip-radius:           10px;
    --aip-radius-lg:        16px;
    --aip-radius-sm:        6px;

    --aip-transition:       200ms cubic-bezier(.4,0,.2,1);

    font-family:            var(--aip-font-body);
    color:                  var(--aip-text);
    box-sizing:             border-box;
}

/* ---- Utility ---- */
.aip-hidden { display: none !important; }

/* ---- Reset inside wrapper only ---- */
.aip-wrapper *, .aip-wrapper *::before, .aip-wrapper *::after { box-sizing: border-box; }
.aip-wrapper ul { list-style: none; margin: 0; padding: 0; }
.aip-wrapper button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.aip-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 22px;
    border-radius:   var(--aip-radius);
    font-size:       15px;
    font-weight:     600;
    letter-spacing:  0.01em;
    transition:      background var(--aip-transition), transform var(--aip-transition), box-shadow var(--aip-transition);
    white-space:     nowrap;
}

.aip-btn--primary {
    background:      var(--aip-primary, #3b82f6);
    color:           var(--aip-primary-text, #fff);
    box-shadow:      0 2px 8px rgba(0,0,0,0.25);
}
.aip-btn--primary:hover { background: var(--aip-primary-hover, #2563eb); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.30); }
.aip-btn--primary:active { transform: translateY(0); }
.aip-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.aip-btn__icon { flex-shrink: 0; }

/* Demo toggle buttons (Strong / Weak fit) */
.aip-btn--demo {
    padding:      8px 18px;
    border:       1px solid var(--aip-card-border);
    border-radius: var(--aip-radius-sm);
    font-size:    14px;
    font-weight:  500;
    color:        var(--aip-text-muted);
    background:   #fff;
    transition:   all var(--aip-transition);
}
.aip-btn--demo:hover            { border-color: var(--aip-accent); color: var(--aip-text); background: #f9fafb; }
.aip-btn--demo--strong.aip-btn--demo--active { background: var(--aip-success-bg); border-color: var(--aip-success-border); color: var(--aip-success-text); }
.aip-btn--demo--weak.aip-btn--demo--active   { background: var(--aip-warn-bg);    border-color: var(--aip-warn-border);    color: var(--aip-warn-text); }

/* ==========================================================================
   HERO
   ========================================================================== */
.aip-hero {
    text-align: center;
    padding:    72px 24px 56px;
}
.aip-hero__inner { max-width: 640px; margin: 0 auto; }

.aip-hero__avatar {
    width:           72px;
    height:          72px;
    border-radius:   50%;
    background:      var(--aip-primary, #3b82f6);
    color:           var(--aip-primary-text, #fff);
    font-size:       28px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 24px;
    box-shadow:      0 4px 20px rgba(0,0,0,0.25);
}

.aip-hero__name {
    font-family: var(--aip-font-heading);
    font-size:   clamp(32px, 7vw, 52px);
    font-weight: 700;
    margin:      0 0 6px;
    line-height: 1.1;
}
.aip-hero__title {
    font-size:  18px;
    color:      var(--aip-accent, #60a5fa);
    font-weight: 500;
    margin:     0 0 12px;
}
.aip-hero__bio {
    font-size:  15px;
    color:      var(--aip-text-muted);
    margin:     0 0 28px;
    line-height:1.55;
}
.aip-hero__cta { margin-top: 4px; }

/* ==========================================================================
   SECTIONS (shared layout)
   ========================================================================== */
.aip-section {
    padding: 56px 24px;
}
.aip-section__inner { max-width: 780px; margin: 0 auto; }
.aip-section__heading {
    font-family: var(--aip-font-heading);
    font-size:   28px;
    font-weight: 700;
    margin:      0 0 6px;
}
.aip-section__sub {
    font-size: 14px;
    color:     var(--aip-text-muted);
    margin:    0 0 28px;
    line-height: 1.5;
}

/* ==========================================================================
   EXPERIENCE CARDS
   ========================================================================== */
.aip-cards { display: flex; flex-direction: column; gap: 16px; }

.aip-card {
    background:     var(--aip-card-bg);
    border:         1px solid var(--aip-card-border);
    border-radius:  var(--aip-radius-lg);
    padding:        24px;
    transition:     border-color var(--aip-transition), box-shadow var(--aip-transition);
}
.aip-card:hover { border-color: var(--aip-accent); box-shadow: 0 2px 16px rgba(0,0,0,0.08); }

.aip-card__header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             12px;
    margin-bottom:   14px;
    flex-wrap:       wrap;
}
.aip-card__company {
    font-family: var(--aip-font-heading);
    font-size:   18px;
    font-weight: 700;
    margin:      0;
}
.aip-card__role {
    font-size:  14px;
    color:      var(--aip-text-muted);
    margin:     4px 0 0;
}
.aip-card__dates {
    font-size:  13px;
    color:      var(--aip-text-muted);
    white-space: nowrap;
}

.aip-card__bullets {
    margin-bottom: 16px;
}
.aip-card__bullets li {
    font-size:   14px;
    line-height: 1.5;
    padding:     5px 0;
    padding-left: 20px;
    position:    relative;
    color:       var(--aip-text-muted);
}
.aip-card__bullets li::before {
    content:    '–';
    position:   absolute;
    left:       0;
    color:      var(--aip-accent, #60a5fa);
}

/* "View AI Context" toggle button */
.aip-card__toggle {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    font-weight: 600;
    color:       var(--aip-accent, #60a5fa);
    transition:  color var(--aip-transition);
}
.aip-card__toggle:hover { color: var(--aip-primary, #3b82f6); }
.aip-card__chevron {
    transition: transform var(--aip-transition);
}
.aip-card__toggle[aria-expanded="true"] .aip-card__chevron { transform: rotate(180deg); }

/* Collapsible context panel */
.aip-card__context {
    max-height:  0;
    overflow:    hidden;
    transition:  max-height 320ms cubic-bezier(.4,0,.2,1), padding 200ms ease;
    padding:     0 0 0 20px;
    border-left: 2px solid var(--aip-accent, #60a5fa);
    margin-top:  12px;
}
.aip-card__context.aip-open {
    max-height: 300px;
    padding:    12px 0 4px 20px;
}
.aip-card__context p {
    margin:    0;
    font-size: 13.5px;
    line-height: 1.6;
    color:     var(--aip-text-muted);
}

/* ==========================================================================
   SKILLS GRID
   ========================================================================== */
.aip-skills__grid {
    display:       grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:           16px;
}

.aip-skills__col {
    border-radius: var(--aip-radius-lg);
    padding:       24px 20px;
    border:        1px solid var(--aip-card-border);
}
.aip-skills__col--strong   { background: var(--aip-success-bg); border-color: var(--aip-success-border); }
.aip-skills__col--moderate { background: var(--aip-card-bg);    border-color: var(--aip-card-border); }
.aip-skills__col--gaps     { background: var(--aip-warn-bg);    border-color: var(--aip-warn-border); }

.aip-skills__label {
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin:         0 0 14px;
}
.aip-skills__col--strong   .aip-skills__label { color: var(--aip-success-text); }
.aip-skills__col--moderate .aip-skills__label { color: var(--aip-text-muted); }
.aip-skills__col--gaps     .aip-skills__label { color: var(--aip-warn-text); }

.aip-skills__list li {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   14px;
    padding:     5px 0;
    line-height: 1.4;
}
.aip-skills__col--strong   .aip-skills__list svg { color: var(--aip-success-text); }
.aip-skills__col--moderate .aip-skills__list svg { color: var(--aip-text-muted); }
.aip-skills__col--gaps     .aip-skills__list svg { color: var(--aip-warn-text); }

/* ==========================================================================
   HONEST FIT ASSESSMENT
   ========================================================================== */
.aip-fitcheck__inner { max-width: 720px; }

.aip-fitcheck__demos {
    display: flex;
    gap:     10px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.aip-fitcheck__input-wrap {
    background:     #fff;
    border:         1px solid var(--aip-card-border);
    border-radius:  var(--aip-radius-lg);
    padding:        20px;
    margin-bottom:  20px;
    transition:     border-color var(--aip-transition);
}
.aip-fitcheck__input-wrap:focus-within { border-color: var(--aip-accent); }

.aip-fitcheck__input-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   13px;
    font-weight: 600;
    color:       var(--aip-text-muted);
    margin-bottom: 10px;
}

.aip-fitcheck__textarea {
    width:           100%;
    min-height:      120px;
    resize:          vertical;
    background:      #f9fafb;
    border:          1px solid var(--aip-card-border);
    border-radius:   var(--aip-radius-sm);
    padding:         12px 14px;
    font-size:       14px;
    font-family:     var(--aip-font-body);
    color:           var(--aip-text);
    line-height:     1.6;
    transition:      border-color var(--aip-transition);
}
.aip-fitcheck__textarea::placeholder { color: var(--aip-text-muted); }
.aip-fitcheck__textarea:focus         { outline: none; border-color: var(--aip-accent); background: #fff; }

.aip-fitcheck__char-hint {
    font-size: 12px;
    color:     var(--aip-text-muted);
    margin:    8px 0 0;
}
.aip-fitcheck__char-hint.aip-ok  { color: var(--aip-success-text); }
.aip-fitcheck__char-hint.aip-bad { color: var(--aip-error-text); }

.aip-fitcheck__submit { margin-top: 4px; }

/* Loading spinner */
.aip-fitcheck__loading {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     20px 0;
    font-size:   14px;
    color:       var(--aip-text-muted);
}
.aip-spinner {
    width:  24px;
    height: 24px;
    border: 3px solid var(--aip-card-border);
    border-top-color: var(--aip-primary, #3b82f6);
    border-radius: 50%;
    animation: aip-spin 0.7s linear infinite;
}
@keyframes aip-spin { to { transform: rotate(360deg); } }

/* Error banner */
.aip-fitcheck__error {
    background:    var(--aip-error-bg);
    border:        1px solid var(--aip-error-border);
    border-radius: var(--aip-radius);
    padding:       12px 16px;
    font-size:     14px;
    color:         var(--aip-error-text);
    margin-top:    16px;
}

/* --- Fit Assessment RESULTS --- */
.aip-fitcheck__results { margin-top: 24px; animation: aip-fadeIn 300ms ease; }
@keyframes aip-fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Verdict banner */
.aip-verdict {
    border-radius:  var(--aip-radius-lg);
    padding:        18px 22px;
    display:        flex;
    align-items:    center;
    gap:            16px;
    margin-bottom:  24px;
}
.aip-verdict--strong { background: var(--aip-success-bg); border: 1px solid var(--aip-success-border); }
.aip-verdict--weak   { background: var(--aip-warn-bg);    border: 1px solid var(--aip-warn-border); }

.aip-verdict__icon {
    width:  44px;
    height: 44px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.aip-verdict--strong .aip-verdict__icon { background: var(--aip-success-bg); color: var(--aip-success-text); border: 2px solid var(--aip-success-border); }
.aip-verdict--weak   .aip-verdict__icon { background: var(--aip-warn-bg);    color: var(--aip-warn-text);    border: 2px solid var(--aip-warn-border); }

.aip-verdict__title {
    font-family: var(--aip-font-heading);
    font-size:   20px;
    font-weight: 700;
    margin:      0 0 2px;
}
.aip-verdict--strong .aip-verdict__title { color: var(--aip-success-text); }
.aip-verdict--weak   .aip-verdict__title { color: var(--aip-warn-text); }

.aip-verdict__summary { font-size: 13px; color: var(--aip-text-muted); margin: 0; }

/* Section labels inside results */
.aip-result-label {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--aip-text-muted);
    margin:         0 0 10px;
}

/* Match / Gap item cards */
.aip-result-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.aip-result-item {
    background:    var(--aip-card-bg);
    border:        1px solid var(--aip-card-border);
    border-radius: var(--aip-radius);
    padding:       14px 16px 14px 44px;
    position:      relative;
}
.aip-result-item__icon {
    position:  absolute;
    left:      14px;
    top:       16px;
    width:     20px;
    height:    20px;
}
.aip-result-item__title {
    font-size:  14px;
    font-weight: 600;
    margin:     0 0 4px;
}
.aip-result-item--match .aip-result-item__title { color: var(--aip-success-text); }
.aip-result-item--gap   .aip-result-item__title { color: var(--aip-warn-text); }
.aip-result-item--match .aip-result-item__icon  { color: var(--aip-success-text); }
.aip-result-item--gap   .aip-result-item__icon  { color: var(--aip-warn-text); }

.aip-result-item__detail {
    font-size:   13px;
    color:       var(--aip-text-muted);
    margin:      0;
    line-height: 1.5;
}

/* "What does transfer" section */
.aip-result-transfer {
    background:    var(--aip-card-bg);
    border:        1px solid var(--aip-card-border);
    border-radius: var(--aip-radius);
    padding:       14px 16px;
    margin-bottom: 24px;
}
.aip-result-transfer p { font-size: 13px; color: var(--aip-text-muted); margin: 0; line-height: 1.5; }

/* Recommendation box */
.aip-result-recommendation {
    border-radius: var(--aip-radius-lg);
    padding:       18px 20px;
    margin-top:    8px;
}
.aip-verdict--strong ~ .aip-result-recommendation,
.aip-result-recommendation--strong { background: var(--aip-success-bg); border: 1px solid var(--aip-success-border); }
.aip-result-recommendation--weak   { background: var(--aip-warn-bg);    border: 1px solid var(--aip-warn-border); }

.aip-result-recommendation .aip-result-label { margin-bottom: 6px; }
.aip-result-recommendation p {
    font-size:   14px;
    line-height: 1.6;
    margin:      0;
}
.aip-result-recommendation--strong p { color: var(--aip-success-text); }
.aip-result-recommendation--weak   p { color: var(--aip-warn-text); }

/* ==========================================================================
   CHAT MODAL
   ========================================================================== */
.aip-modal-overlay {
    position:         fixed;
    inset:            0;
    z-index:          99999;
    background:       var(--aip-modal-overlay);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          24px;
    animation:        aip-fadeIn 150ms ease;
}

.aip-modal {
    background:     var(--aip-modal-bg);
    border-radius:  var(--aip-radius-lg);
    width:          100%;
    max-width:      600px;
    max-height:     85vh;
    display:        flex;
    flex-direction: column;
    box-shadow:     0 24px 64px rgba(0,0,0,0.45);
    overflow:       hidden;
    animation:      aip-slideUp 200ms cubic-bezier(.4,0,.2,1);
}
@keyframes aip-slideUp { from { transform:translateY(24px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* Modal header */
.aip-modal__header {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     18px 20px;
    border-bottom: 1px solid var(--aip-modal-card-border);
}
.aip-modal__avatar {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    background:      var(--aip-primary, #3b82f6);
    color:           var(--aip-primary-text, #fff);
    font-size:       16px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.aip-modal__title { font-size: 16px; font-weight: 700; margin: 0; color: var(--aip-modal-text); }
.aip-modal__status { font-size: 12px; color: var(--aip-modal-text-muted); display: flex; align-items: center; gap: 5px; }
.aip-modal__dot {
    width:  8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aip-success-text);
    animation: aip-pulse 2s infinite;
}
@keyframes aip-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.aip-modal__close {
    margin-left: auto;
    color:       var(--aip-modal-text-muted);
    transition:  color var(--aip-transition);
    padding:     4px;
}
.aip-modal__close:hover { color: var(--aip-modal-text); }

/* Message area */
.aip-modal__messages {
    flex:       1;
    overflow-y: auto;
    padding:    24px 20px;
    display:    flex;
    flex-direction: column;
    gap:        12px;
}
.aip-modal__messages::-webkit-scrollbar       { width: 6px; }
.aip-modal__messages::-webkit-scrollbar-track  { background: transparent; }
.aip-modal__messages::-webkit-scrollbar-thumb  { background: var(--aip-modal-card-border); border-radius: 3px; }

/* Empty / starter state */
.aip-modal__empty {
    text-align: center;
    padding:    32px 16px;
    flex:       1;
    display:    flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:        12px;
}
.aip-modal__sparkle { color: var(--aip-primary); }
.aip-modal__empty h3 { font-size: 18px; margin: 0; color: var(--aip-modal-text); }
.aip-modal__empty p  { font-size: 13px; color: var(--aip-modal-text-muted); margin: 0; max-width: 320px; line-height: 1.5; }

.aip-modal__starters { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 380px; margin-top: 4px; }
.aip-modal__starter {
    background:    var(--aip-modal-card-bg);
    border:        1px solid var(--aip-modal-card-border);
    border-radius: var(--aip-radius);
    padding:       11px 14px;
    text-align:    left;
    font-size:     14px;
    color:         var(--aip-modal-text-muted);
    transition:    all var(--aip-transition);
}
.aip-modal__starter:hover { border-color: var(--aip-primary); color: var(--aip-modal-text); background: rgba(255,255,255,0.10); }

/* Chat bubbles */
.aip-bubble {
    max-width:     85%;
    padding:       10px 14px;
    border-radius: 16px;
    font-size:     14px;
    line-height:   1.55;
    word-break:    break-word;
}
.aip-bubble--user {
    align-self:  flex-end;
    background:  var(--aip-primary, #3b82f6);
    color:       var(--aip-primary-text, #fff);
    border-bottom-right-radius: 4px;
}
.aip-bubble--ai {
    align-self:  flex-start;
    background:  rgba(255,255,255,0.08);
    color:       var(--aip-modal-text);
    border-bottom-left-radius: 4px;
}

/* Typing indicator bubble */
.aip-bubble--typing .aip-typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 20px;
}
.aip-typing-dots span {
    width:  6px;
    height: 6px;
    border-radius: 50%;
    background:    var(--aip-modal-text-muted);
    animation:     aip-typingBounce 1.2s infinite;
}
.aip-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.aip-typing-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes aip-typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

/* Modal input bar */
.aip-modal__input-bar {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     14px 16px;
    border-top:  1px solid var(--aip-modal-card-border);
}
.aip-modal__input {
    flex:           1;
    background:     var(--aip-modal-input-bg);
    border:         1px solid var(--aip-modal-card-border);
    border-radius:  var(--aip-radius);
    padding:        10px 14px;
    font-size:      14px;
    font-family:    var(--aip-font-body);
    color:          var(--aip-modal-text);
    transition:     border-color var(--aip-transition);
    outline:        none;
}
.aip-modal__input::placeholder { color: var(--aip-modal-text-muted); }
.aip-modal__input:focus         { border-color: var(--aip-primary); }

.aip-modal__send {
    width:           40px;
    height:          40px;
    border-radius:   var(--aip-radius);
    background:      var(--aip-primary, #3b82f6);
    color:           var(--aip-primary-text, #fff);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--aip-transition), opacity var(--aip-transition);
    flex-shrink:     0;
}
.aip-modal__send:hover   { background: var(--aip-primary-hover, #2563eb); }
.aip-modal__send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Modal inline error */
.aip-modal__error {
    background:    var(--aip-error-bg);
    border:        1px solid var(--aip-error-border);
    border-radius: var(--aip-radius-sm);
    padding:       8px 14px;
    margin:        0 16px 12px;
    font-size:     13px;
    color:         var(--aip-error-text);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.aip-footer {
    text-align:    center;
    padding:       40px 24px 32px;
    border-top:    1px solid var(--aip-card-border);
}
.aip-footer__name  { font-family: var(--aip-font-heading); font-size: 18px; font-weight: 700; margin: 0; color: var(--aip-text); }
.aip-footer__title { font-size: 13px; color: var(--aip-text-muted); margin: 4px 0 0; }
.aip-footer__note  { font-size: 11px; color: var(--aip-text-muted); margin: 12px 0 0; opacity: 0.6; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 480px) {
    .aip-hero { padding: 48px 16px 36px; }
    .aip-section { padding: 40px 16px; }
    .aip-modal { max-height: 92vh; margin: 8px; }
    .aip-fitcheck__demos { flex-direction: column; align-items: stretch; }
    .aip-skills__grid { grid-template-columns: 1fr; }
}