/**
 * Vibrant Innovations — About, Services, Portfolio and project pages
 *
 * Loaded after home.css and built from the same tokens, so every page shares
 * the homepage's spacing, cards and motion, and follows light/dark mode.
 */

/* ── Shared ────────────────────────────────────────────────────────── */
.vi-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.75; color: var(--vi-muted); max-width: 56ch; margin-bottom: 1.8rem; }
.vi-page-hero .vi-section-head { margin-bottom: 0; }
.vi-page-hero .vi-cta-row { margin: 1.6rem 0 0; }
.vi-page-hero .vi-section-head .vi-cta-row { justify-content: center; }
.vi-btn-sm { padding: .6rem 1.15rem; font-size: .88rem; }

/* Split hero: words on the left, picture on the right */
.vi-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 991px) { .vi-split { grid-template-columns: 1fr; } }
.vi-split h1 { text-align: left; }
.vi-split-media { position: relative; }
.vi-split-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: 22px; box-shadow: var(--vi-shadow-lg);
}
.vi-split-media::after {
  content: ''; position: absolute; inset: auto -14px -14px auto; width: 46%; height: 46%; z-index: -1;
  border-radius: 22px; background: linear-gradient(135deg, var(--vi-accent-soft), transparent);
}

.vi-cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ── About: company facts ──────────────────────────────────────────── */
/* The last card holds the phone and email, so it gets the widest column */
.vi-facts { display: grid; grid-template-columns: 1fr 1fr 1fr 1.45fr; gap: 1rem; }
@media (max-width: 1100px) { .vi-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .vi-facts { grid-template-columns: minmax(0, 1fr); } }
.vi-fact a { color: inherit; text-decoration: none; }
.vi-fact a:hover { color: var(--vi-accent-strong); }
.vi-fact {
  display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.2rem; color: inherit; text-decoration: none;
  background: var(--vi-surface); border: 1px solid var(--vi-line); border-radius: var(--vi-radius);
  transition: transform var(--vi-base) var(--vi-ease), box-shadow var(--vi-base) var(--vi-ease), border-color var(--vi-base) var(--vi-ease);
}
a.vi-fact:hover { transform: translateY(-3px); box-shadow: var(--vi-shadow-md); border-color: var(--vi-accent); color: inherit; }
.vi-fact i {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.15rem; background: var(--vi-accent-soft); color: var(--vi-accent-strong);
}
.vi-fact small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vi-muted); }
.vi-fact b { display: block; font-size: .95rem; font-weight: 600; color: var(--heading-color); overflow-wrap: break-word; }

/* ── About: story ───────────────────────────────────────────────────── */
.vi-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 991px) { .vi-story { grid-template-columns: 1fr; } }
.vi-story h2 { font-family: var(--heading-font); font-weight: 800; color: var(--heading-color); font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.15; margin-bottom: 1rem; }
.vi-story-lead { font-size: 1.12rem; line-height: 1.75; color: var(--default-color); padding-left: 1.1rem; border-left: 3px solid var(--vi-accent); margin: 0; }
.vi-story-body { font-size: 1rem; line-height: 1.85; color: var(--vi-muted); }

.vi-checklist { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem 1.5rem; }
.vi-checklist li { position: relative; padding-left: 2rem; font-size: .95rem; line-height: 1.55; color: var(--default-color); }
.vi-checklist li::before {
  content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: -.05rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .95rem;
  background: var(--vi-accent-soft); color: var(--vi-accent-strong);
}

/* ── About: expertise ──────────────────────────────────────────────── */
.vi-capabilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.vi-capability {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--vi-surface); border: 1px solid var(--vi-line); border-radius: var(--vi-radius);
  transition: transform var(--vi-base) var(--vi-ease), box-shadow var(--vi-base) var(--vi-ease), border-color var(--vi-base) var(--vi-ease);
}
.vi-capability .vi-card-icon { margin: 0; flex: 0 0 auto; width: 48px; height: 48px; font-size: 1.35rem; }
.vi-capability b { display: block; color: var(--heading-color); font-size: 1rem; }
.vi-capability small { display: block; color: var(--vi-muted); font-size: .84rem; line-height: 1.5; margin-top: .15rem; }
.vi-capability > i { margin-left: auto; color: var(--vi-accent-strong); transition: transform var(--vi-fast) var(--vi-ease); }
.vi-capability:hover { transform: translateY(-4px); box-shadow: var(--vi-shadow-md); border-color: var(--vi-accent); color: inherit; }
.vi-capability:hover > i { transform: translateX(4px); }

/* ── Services ──────────────────────────────────────────────────────── */
.vi-hero-chips { justify-content: center; margin: 1.8rem 0 0; }
.vi-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; }
@media (max-width: 420px) { .vi-services { grid-template-columns: 1fr; } }
.vi-service {
  position: relative; display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 110px;
  padding: clamp(1.5rem, 3vw, 2.1rem); background: var(--vi-surface); border: 1px solid var(--vi-line); border-radius: calc(var(--vi-radius) + 4px);
  transition: transform var(--vi-base) var(--vi-ease), box-shadow var(--vi-base) var(--vi-ease), border-color var(--vi-base) var(--vi-ease);
}
.vi-service::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--vi-accent), var(--vi-accent-strong));
  transform: scaleX(0); transform-origin: left; transition: transform var(--vi-base) var(--vi-ease);
}
.vi-service:hover, .vi-service:target { transform: translateY(-6px); box-shadow: var(--vi-shadow-lg); border-color: var(--vi-accent); }
.vi-service:hover::before, .vi-service:target::before { transform: scaleX(1); }
.vi-service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.vi-service-top .vi-card-icon { margin: 0; }
.vi-service-num { font-family: var(--heading-font); font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--vi-accent); opacity: .35; }
.vi-service h2 { font-family: var(--heading-font); font-size: 1.3rem; font-weight: 700; color: var(--heading-color); margin: 0 0 .6rem; }
.vi-service > p { font-size: .95rem; line-height: 1.7; color: var(--vi-muted); margin: 0 0 1rem; }
.vi-service ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .5rem; }
.vi-service ul li { position: relative; padding-left: 1.75rem; font-size: .92rem; line-height: 1.5; color: var(--default-color); }
.vi-service ul li::before {
  content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: .05rem;
  font-size: 1rem; line-height: 1; color: var(--vi-accent-strong);
}
.vi-service-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }

.vi-faq { max-width: 820px; margin: 0 auto; display: grid; gap: .8rem; }
.vi-faq details {
  background: var(--vi-surface); border: 1px solid var(--vi-line); border-radius: var(--vi-radius);
  transition: border-color var(--vi-base) var(--vi-ease), box-shadow var(--vi-base) var(--vi-ease);
}
.vi-faq details[open] { border-color: var(--vi-accent); box-shadow: var(--vi-shadow-md); }
.vi-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; font-weight: 600; font-size: 1rem; color: var(--heading-color);
}
.vi-faq summary::-webkit-details-marker { display: none; }
.vi-faq summary::after {
  content: '\F4FE'; font-family: 'bootstrap-icons'; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--vi-accent-soft); color: var(--vi-accent-strong);
  transition: transform var(--vi-base) var(--vi-spring);
}
.vi-faq details[open] summary::after { transform: rotate(45deg); }
.vi-faq details p { margin: 0; padding: 0 1.35rem 1.25rem; font-size: .95rem; line-height: 1.75; color: var(--vi-muted); }

/* Brochure viewer */
.vi-modal .modal-content { border: 1px solid var(--vi-line); border-radius: 20px; overflow: hidden; background: var(--vi-surface); color: var(--default-color); box-shadow: var(--vi-shadow-lg); }
.vi-modal .modal-header { border-bottom: 1px solid var(--vi-line); padding: 1rem 1.25rem; }
.vi-modal .modal-title { font-family: var(--heading-font); font-weight: 700; color: var(--heading-color); }
.vi-modal .modal-body { padding: 0; background: var(--vi-raised); }
.vi-modal iframe { display: block; width: 100%; height: min(75vh, 720px); border: 0; }
:root[data-theme="dark"] .vi-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vi-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); } }

/* ── Portfolio ─────────────────────────────────────────────────────── */
.vi-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2.2rem; }
.vi-filter .vi-chip { cursor: pointer; font: inherit; font-size: .88rem; }
.vi-work-item[hidden] { display: none; }
.vi-work-item.is-entering { animation: vi-work-in .45s var(--vi-ease) both; }
@keyframes vi-work-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.vi-work-cap h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .2rem; color: #fff; }
.vi-work-more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem; font-size: .8rem; font-weight: 600; color: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity var(--vi-base) var(--vi-ease), transform var(--vi-base) var(--vi-ease);
}
.vi-work-item:hover .vi-work-more, .vi-work-item:focus-visible .vi-work-more { opacity: 1; transform: none; }
@media (hover: none) { .vi-work-more { opacity: 1; transform: none; } }
.vi-filter-empty { text-align: center; color: var(--vi-muted); margin: 1rem 0 0; }

/* ── Project page ──────────────────────────────────────────────────── */
.vi-project-head { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2.2rem); position: relative; overflow: hidden; }
.vi-project-head::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(900px 420px at 10% -20%, var(--vi-accent-soft), transparent 62%);
}
.vi-project-head > .container { position: relative; z-index: 1; }
.vi-project-head h1 {
  font-family: var(--heading-font); font-weight: 800; color: var(--heading-color);
  font-size: clamp(2rem, 4.8vw, 3.2rem); line-height: 1.1; letter-spacing: -.02em; margin: .4rem 0 .9rem; max-width: 22ch;
}
.vi-project-head .vi-lead { margin-bottom: 1.4rem; }
.vi-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.vi-tag {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 50px; font-size: .84rem;
  background: var(--vi-surface); border: 1px solid var(--vi-line); color: var(--default-color);
}
.vi-tag i { color: var(--vi-accent-strong); }

.vi-project-media { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.vi-stage {
  position: relative; border-radius: 24px; padding: clamp(1.5rem, 4vw, 3rem);
  background: radial-gradient(700px 360px at 50% 0%, var(--vi-accent-soft), transparent 70%), var(--vi-raised);
  border: 1px solid var(--vi-line); display: grid; place-items: center;
}
.vi-stage-note { margin: 1rem 0 0; text-align: center; font-size: .86rem; color: var(--vi-muted); }

/* Phone mock-up around a live demo (uses the site's phone frame artwork) */
.vi-phone-frame { position: relative; width: min(100%, 360px); aspect-ratio: 432 / 863; filter: drop-shadow(0 30px 50px rgba(16, 24, 20, .22)); }
.vi-phone-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.vi-phone-frame .vi-screen { position: absolute; top: 2.55%; left: 5.3%; width: 91.7%; height: 94.8%; border-radius: 22px; overflow: hidden; z-index: 1; background: #fff; }
.vi-phone-frame iframe, .vi-browser-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* Browser window around a live demo */
.vi-browser-frame { width: 100%; max-width: 1040px; border-radius: 16px; overflow: hidden; background: var(--vi-surface); border: 1px solid var(--vi-line); box-shadow: var(--vi-shadow-lg); }
.vi-browser-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; background: var(--vi-raised); border-bottom: 1px solid var(--vi-line); }
.vi-browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.vi-browser-bar span:nth-child(2) { background: #febc2e; }
.vi-browser-bar span:nth-child(3) { background: #28c840; }
.vi-browser-bar em { flex: 1; margin-left: .6rem; font-style: normal; font-size: .78rem; color: var(--vi-muted); background: var(--vi-surface); border-radius: 50px; padding: .25rem .8rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vi-browser-frame .vi-screen { aspect-ratio: 16 / 10; }

/* Gallery */
.vi-gallery-main { display: block; width: 100%; border-radius: 20px; overflow: hidden; background: var(--vi-raised); border: 1px solid var(--vi-line); box-shadow: var(--vi-shadow-lg); }
.vi-gallery-main img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; transition: opacity .25s var(--vi-ease); }
.vi-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; margin-top: 1rem; }
.vi-gallery-thumbs button {
  padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--vi-raised); cursor: pointer; aspect-ratio: 4 / 3;
  transition: border-color var(--vi-fast) var(--vi-ease), transform var(--vi-fast) var(--vi-spring);
}
.vi-gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vi-gallery-thumbs button:hover { transform: translateY(-2px); }
.vi-gallery-thumbs button[aria-current="true"] { border-color: var(--vi-accent-strong); }

.vi-project-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; padding-bottom: clamp(3rem, 7vw, 5rem); }
@media (max-width: 991px) { .vi-project-grid { grid-template-columns: 1fr; } }
.vi-project-grid .vi-prose h2:first-child { margin-top: 0; }
.vi-info-card {
  position: sticky; top: 110px; padding: 1.5rem; border-radius: var(--vi-radius);
  background: var(--vi-surface); border: 1px solid var(--vi-line); box-shadow: var(--vi-shadow-md);
}
.vi-info-card h2 { font-family: var(--heading-font); font-size: 1.05rem; font-weight: 700; color: var(--heading-color); margin: 0 0 1rem; }
.vi-info-card dl { margin: 0 0 1.3rem; display: grid; gap: .8rem; }
.vi-info-card dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vi-muted); }
.vi-info-card dd { margin: .1rem 0 0; font-size: .95rem; color: var(--heading-color); overflow-wrap: anywhere; }
.vi-info-card dd a { color: var(--heading-color); text-decoration: underline; text-decoration-color: var(--vi-accent); text-underline-offset: 3px; }
.vi-info-card .vi-btn { width: 100%; justify-content: center; }
.vi-info-card .vi-btn + .vi-btn { margin-top: .6rem; }
@media (max-width: 991px) { .vi-info-card { position: static; } }