/*
 * Drive product page (template-parts/product-pages/drive.php). Hand-built, not
 * generated. Hero, benefits and band come from feature-pages.css; this file adds
 * the Drive app mockup and the page's own sections.
 */

.vsd {
    --vsd-primary: #6366f1;
    --vsd-primary-ink: #4f46e5;
    --vsd-ink: #111827;
    --vsd-text: #5f6b7e;
    --vsd-muted: #8a93a3;
    --vsd-line: #e5e7eb;
    --vsd-tint: #eef2ff;
    --vsd-sky: #0ea5e9;
}
.vsd svg { display: block; }
.vsd-wrap { max-width: 1180px; margin: 0 auto; }
.vsd-section { padding: 6rem 1.5rem; background: #fff; }
.vsd-section--tint { background: linear-gradient(135deg, #f5f3ff, #fff 55%, #eef6ff); }
.vsd .vs-feature-section-heading span { color: var(--vsd-primary-ink); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 640px) { .vsd-section { padding: 4.25rem 1.25rem; } }

/* ---------- Hero mockup: the Drive screen ---------- */

.vsd-preview { padding: 10px; }
.vsd-app { padding: 1.25rem 1.5rem 1rem; border: 1px solid #ebeaf6; border-radius: .9rem; background: #fff; }
.vsd-app__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #f0f1f5; }
.vsd-app__title { display: flex; align-items: center; gap: 1.5rem; }
.vsd-app__title strong { color: var(--vsd-ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.vsd-tabs { display: flex; gap: .25rem; padding: 3px; border-radius: 10px; background: #f4f5f9; }
.vsd-tabs span { padding: .375rem .75rem; border-radius: 8px; color: var(--vsd-text); font-size: .8125rem; font-weight: 600; }
.vsd-tabs .is-active { background: #fff; color: var(--vsd-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.vsd-app__actions { display: flex; align-items: center; gap: .5rem; }
.vsd-search { display: inline-flex; align-items: center; gap: .5rem; width: 13rem; padding: .5rem .75rem; border: 1px solid var(--vsd-line); border-radius: 10px; color: var(--vsd-muted); font-size: .8125rem; }
.vsd-search svg, .vsd-btn svg { width: 15px; height: 15px; }
.vsd-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .875rem; border-radius: 10px; background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff; font-size: .8125rem; font-weight: 600; }
.vsd-btn--ghost { border: 1px solid var(--vsd-line); background: #fff; color: var(--vsd-ink); }
.vsd-btn--rec svg { color: #ef4444; }

.vsd-app__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.vsd-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.vsd-chips span { padding: .3125rem .75rem; border: 1px solid var(--vsd-line); border-radius: 999px; color: var(--vsd-text); font-size: .75rem; font-weight: 600; }
.vsd-chips .is-active { border-color: #c7d2fe; background: var(--vsd-tint); color: var(--vsd-primary-ink); }
.vsd-view { display: flex; align-items: center; gap: .375rem; color: var(--vsd-text); font-size: .75rem; font-weight: 600; }
.vsd-view span { margin-right: .375rem; }
.vsd-view i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--vsd-muted); }
.vsd-view i.is-active { background: var(--vsd-tint); color: var(--vsd-primary-ink); }
.vsd-view svg { width: 15px; height: 15px; }

.vsd-crumbs { margin: 1rem 0 .875rem; color: var(--vsd-muted); font-size: .8125rem; }
.vsd-crumbs span { margin: 0 .25rem; }
.vsd-crumbs b { color: var(--vsd-ink); }

.vsd-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .875rem; }
.vsd-file { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .875rem; border: 1px solid #eef0f4; border-radius: 12px; background: #fcfcfe; }
.vsd-file > i { display: grid; width: 100%; height: 76px; place-items: center; margin-bottom: .375rem; border-radius: 9px; background: var(--vsd-tint); color: var(--vsd-primary-ink); }
.vsd-file > i svg { width: 30px; height: 30px; }
.vsd-file b { overflow: hidden; color: var(--vsd-ink); font-size: .8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.vsd-file small { color: var(--vsd-muted); font-size: .6875rem; }
.vsd-file--folder > i { background: #fff7e6; color: #f59e0b; }
.vsd-file--doc > i { background: #fef2f2; color: #ef4444; }
.vsd-file--image > i { background: #ecfdf5; color: #10b981; }
.vsd-file--zip > i { background: #f1f5f9; color: #64748b; }
.vsd-thumb { position: relative; display: grid; height: 76px; place-items: center; margin-bottom: .375rem; border-radius: 9px; background: linear-gradient(135deg, #312e81, #6d28d9 60%, #0ea5e9); }
.vsd-thumb em { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(15, 23, 42, .7); color: #fff; font-size: .625rem; font-style: normal; font-weight: 600; }
.vsd-play { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--vsd-primary-ink); }
.vsd-play svg { width: 14px; height: 14px; margin-left: 2px; }

.vsd-app__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid #f0f1f5; }
.vsd-app__foot p { margin: 0; color: var(--vsd-text); font-size: .8125rem; white-space: nowrap; }
.vsd-app__foot b { color: var(--vsd-ink); }
.vsd-meter { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: #eef0f5; }
.vsd-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f46e5, #7c3aed); }
.vsd-meter--sm { height: 5px; margin-top: .375rem; }

.vsd-tray { position: absolute; right: -1.5rem; bottom: -2rem; width: 19rem; padding: 1rem; border: 1px solid #e4e1f8; border-radius: 14px; background: #fff; box-shadow: 0 24px 48px -20px rgba(49, 46, 129, .35); text-align: left; }
.vsd-tray__head { display: flex; flex-direction: column; margin: 0 0 .75rem; }
.vsd-tray__head b { color: var(--vsd-ink); font-size: .875rem; }
.vsd-tray__head span { color: var(--vsd-muted); font-size: .75rem; }
.vsd-tray__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .625rem; padding: .5rem 0; }
.vsd-tray__row + .vsd-tray__row { border-top: 1px solid #f0f1f5; }
.vsd-tray__row i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--vsd-tint); color: var(--vsd-primary-ink); }
.vsd-tray__row i svg { width: 16px; height: 16px; }
.vsd-tray__row b { display: block; color: var(--vsd-ink); font-size: .75rem; font-weight: 600; }
.vsd-tray__row small { color: var(--vsd-primary-ink); font-size: .75rem; font-weight: 700; }

/* Keep the storage line clear of the upload tray that overlaps the window's corner. */
@media (min-width: 1024px) { .vsd-app__foot { padding-right: 19rem; } }

@media (max-width: 1023px) {
    .vsd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vsd-tray { position: relative; right: auto; bottom: auto; width: auto; margin: 1rem 0 0; box-shadow: none; }
}
@media (max-width: 640px) {
    .vsd-app { padding: 1rem; }
    .vsd-app__title { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .vsd-app__actions .vsd-btn--ghost, .vsd-view span { display: none; }
    .vsd-search { width: auto; flex: 1; }
    .vsd-app__actions { width: 100%; }
    .vsd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vsd-app__foot { flex-direction: column; align-items: stretch; gap: .5rem; }
    .vsd-app__foot p { white-space: normal; }
}

/* ---------- Sharing levels ---------- */

.vsd-access { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.vsd-access li { padding: 1.75rem 1.5rem; border: 1px solid #e5e4f5; border-radius: 1rem; background: linear-gradient(145deg, #fff, #fbfaff); box-shadow: 0 12px 35px rgba(69, 58, 130, .06); }
.vsd-access i { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 1.25rem; border-radius: .8rem; background: #ece9ff; color: #5a4ae2; }
.vsd-access li:last-child i { background: #e0f2fe; color: #0284c7; }
.vsd-access svg { width: 22px; height: 22px; }
.vsd-access h3 { margin: 0 0 .5rem; color: var(--vsd-ink); font-size: 1.125rem; font-weight: 700; }
.vsd-access p { margin: 0; color: var(--vsd-text); line-height: 1.6; }
.vsd-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 2rem 0 0; color: #344054; font-weight: 500; text-align: center; }
.vsd-note svg, .vsd-storage-foot p svg { width: 18px; height: 18px; flex: 0 0 auto; color: #10b981; stroke-width: 2.5; }
@media (max-width: 1023px) { .vsd-access { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vsd-access { grid-template-columns: 1fr; } }

/* ---------- Big files and recordings ---------- */

.vsd-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
.vsd-kicker { margin: 0 0 .8rem; color: var(--vsd-primary-ink); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vsd-split h2 { margin: 0 0 1rem; color: var(--vsd-ink); font-size: clamp(2rem, 4vw, 3rem); font-weight: 750; line-height: 1.08; letter-spacing: -.04em; }
.vsd-lead { margin: 0 0 1.75rem; color: var(--vsd-text); font-size: 1.08rem; line-height: 1.7; }
.vsd-points { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.vsd-points li { display: flex; gap: .75rem; color: var(--vsd-text); line-height: 1.6; }
.vsd-points svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; padding: 4px; border-radius: 50%; background: #e8faf3; color: #0b9d6b; stroke-width: 3; }
.vsd-points b { color: var(--vsd-ink); }

.vsd-watch { padding: 1rem; border: 1px solid rgba(99, 102, 241, .18); border-radius: 1.25rem; background: #fff; box-shadow: 0 28px 70px rgba(54, 47, 120, .16); }
.vsd-watch__video { position: relative; display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border-radius: .9rem; background: radial-gradient(circle at 30% 30%, #7c3aed, #312e81 55%, #0f172a); }
.vsd-play--lg { width: 64px; height: 64px; }
.vsd-play--lg svg { width: 24px; height: 24px; }
.vsd-watch__progress { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .3); }
.vsd-watch__progress span { display: block; width: 34%; height: 100%; border-radius: inherit; background: #fff; }
.vsd-watch__meta { display: flex; flex-direction: column; padding: 1rem .25rem .75rem; }
.vsd-watch__meta b { color: var(--vsd-ink); }
.vsd-watch__meta small { color: var(--vsd-muted); font-size: .8125rem; }
.vsd-watch__comments { display: grid; gap: .75rem; padding: .75rem .25rem; border-top: 1px solid #f0f1f5; }
.vsd-comment { display: flex; gap: .625rem; }
.vsd-comment b { color: var(--vsd-ink); font-size: .8125rem; }
.vsd-comment em { margin-left: .25rem; padding: 0 .375rem; border-radius: 6px; background: var(--vsd-tint); color: var(--vsd-primary-ink); font-size: .6875rem; font-style: normal; font-weight: 700; }
.vsd-comment p { margin: .125rem 0 0; color: var(--vsd-text); font-size: .8125rem; }
.vsd-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--c); color: #fff; font-size: .6875rem; font-weight: 700; }
.vsd-reactions { display: flex; gap: .5rem; padding: .5rem .25rem 0; }
.vsd-reactions span { padding: .25rem .625rem; border: 1px solid var(--vsd-line); border-radius: 999px; font-size: .8125rem; }
@media (max-width: 1023px) { .vsd-split { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- Storage ---------- */

.vsd-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 60rem; margin: 0 auto; }
.vsd-plan { display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem; border: 1px solid #e5e4f5; border-radius: 1.25rem; background: #fff; text-align: center; }
.vsd-plan--featured { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #6366f1, #a855f7) border-box; box-shadow: 0 24px 48px -28px rgba(79, 70, 229, .45); }
.vsd-plan p { margin: 0 0 .5rem; color: var(--vsd-text); font-weight: 700; }
.vsd-plan--featured p { color: var(--vsd-primary-ink); }
.vsd-plan strong { color: var(--vsd-ink); font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.vsd-plan span { margin-top: .5rem; color: var(--vsd-text); font-size: .9375rem; }
.vsd-plan em { margin-top: .875rem; padding: .25rem .75rem; border-radius: 999px; background: var(--vsd-tint); color: var(--vsd-primary-ink); font-size: .8125rem; font-style: normal; font-weight: 600; }
.vsd-storage-foot { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 2rem; text-align: center; }
.vsd-storage-foot p { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: #344054; }
.vsd-storage-foot p svg { margin-top: 3px; }
.vsd-link { display: inline-flex; align-items: center; gap: .375rem; margin-top: .5rem; color: var(--vsd-primary-ink); font-weight: 600; text-decoration: none; }
.vsd-link svg { width: 16px; height: 16px; transition: transform .15s; }
.vsd-link:hover svg { transform: translateX(3px); }
@media (max-width: 767px) { .vsd-plans { grid-template-columns: 1fr; max-width: 24rem; } }

/* The shared stylesheet sizes card icons for glyphs; these are SVGs. */
.vsd .vs-feature-card__icon svg { width: 22px; height: 22px; }