/* Avdhoot case studies - builds on portfolio.css, everything under .avp */
.avp-framed { position: relative; background: #fff; border-bottom: 1px solid var(--avp-line); padding-top: 22px; }
.avp-framed .avp-dots { position: absolute; top: 0; left: 0; right: 0; height: 22px; background: #EEF1F6; display: flex; align-items: center; gap: 5px; padding-left: 10px; }
.avp-framed .avp-dots i { width: 7px; height: 7px; border-radius: 50%; background: #CBD2DD; display: block; }
.avp-cs-card .avp-media.avp-framed img { object-position: top; }
.avp-cs-card .avp-media { display: block; }
.avp-cs-company { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--avp-blue); margin-bottom: 6px; }
.avp-cs-card .avp-name { font-size: 18px; line-height: 1.35; }
.avp-cs-card .avp-name a { color: var(--avp-ink); text-decoration: none; }
.avp-cs-card .avp-name a:hover { color: var(--avp-blue); }

/* one case study */
.avp-cs { max-width: 1000px; padding-top: 20px; }
.avp-cs-head { text-align: center; margin-bottom: 30px; }
.avp .avp-cs-title { font-family: inherit; font-size: 34px; line-height: 1.25; font-weight: 600; color: var(--avp-ink); margin: 6px 0 10px; }
.avp-cs-client { font-size: 17px; color: var(--avp-muted); margin-bottom: 14px; }
.avp-cs-tags { justify-content: center; }
.avp-cs-cover { margin: 0 0 30px; border-radius: 16px; overflow: hidden; border: 1px solid var(--avp-line); box-shadow: 0 18px 40px rgba(11, 55, 91, .12); }
.avp-cs-cover img { width: 100%; display: block; }
.avp-cs-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 30px; }
.avp-cs-metric { background: #fff; border: 1px solid var(--avp-line); border-top: 3px solid var(--avp-orange); border-radius: 14px; padding: 16px 18px; }
.avp-cs-metric b { display: block; font-size: 22px; line-height: 1.2; color: var(--avp-navy); margin-bottom: 4px; }
.avp-cs-metric span { font-size: 14px; color: var(--avp-muted); }
.avp-cs-summary { font-size: 18px; line-height: 1.6; color: #333; background: rgba(11, 55, 91, .05); border-left: 4px solid var(--avp-navy); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 0 0 34px; }
.avp-cs-sections { display: grid; gap: 22px; }
.avp-cs-section { background: #fff; border: 1px solid var(--avp-line); border-radius: 16px; padding: 24px 28px; }
.avp .avp-cs-section h2, .avp .avp-cs-gallery h2 { font-family: inherit; font-size: 24px; font-weight: 600; color: var(--avp-navy); margin: 0 0 12px; }
.avp-cs-section p, .avp-cs-section li { font-size: 16px; line-height: 1.7; color: #3B3B3B; }
.avp-cs-section p { margin: 0 0 10px; }
.avp-cs-section ul { margin: 0 0 10px; padding-left: 20px; }
.avp-cs-results { border-color: rgba(16, 185, 129, .35); background: #F3FBF7; }
.avp-cs-gallery { margin-top: 36px; }
.avp-cs-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.avp .avp-cs-shot { display: block; padding: 0; border: 1px solid var(--avp-line); border-radius: 12px; background: #fff; overflow: hidden; cursor: zoom-in; text-align: left; font-family: inherit; }
.avp-cs-shot img { width: 100%; height: 190px; object-fit: cover; object-position: top; display: block; }
.avp-cs-shot span { display: block; font-size: 13px; color: #555; padding: 8px 12px; }
.avp-cs-quote { margin: 36px 0 0; background: var(--avp-navy); color: #fff; border-radius: 16px; padding: 26px 30px; }
.avp-cs-quote p { font-size: 18px; line-height: 1.6; margin: 0 0 10px; color: #fff; }
.avp-cs-quote cite { font-style: normal; opacity: .8; }
.avp-cs-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--avp-line); }
.avp-cs-nav a { color: var(--avp-navy); font-weight: 500; text-decoration: none; }
.avp-cs-nav a:hover { color: var(--avp-blue); }
.avp-cs-zoom { position: fixed; inset: 0; z-index: 99999; background: rgba(15, 23, 42, .9); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.avp-cs-zoom[hidden] { display: none; }
.avp-cs-zoom img { max-width: 100%; max-height: 85vh; border-radius: 8px; }
.avp-cs-zoom div { color: #fff; margin-top: 10px; font-size: 15px; }
@media (max-width: 640px) {
    .avp .avp-cs-title { font-size: 26px; }
    .avp-cs-section { padding: 18px; }
    .avp-cs-summary { font-size: 16px; }
}