/* Sankalpa additions on top of the Virtuo template: same tokens, same look. */

/* Text logo in the template's two-tone style */
.logo-text { font-family: var(--font-primary); font-weight: 700; font-size: 28px; line-height: 1; color: var(--color-heading); letter-spacing: -0.5px; white-space: nowrap; }
.logo-text span { background: var(--theme-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Hero: hero-portrait.jpg (wide, subject on the right, like the template photo) shows when added; dark backdrop until then */
.tmp-banner-one-area.style-2 { background-image: url(../images/hero-portrait.jpg), url(../images/banner-background-one.jpg); background-size: cover; background-position: center right; }
.button-area-banner-one { display: flex; flex-wrap: wrap; gap: 16px; }

/* Project screenshots: even card heights, keep the top of each page in view */
.img-box.v2 > a { display: block; height: 100%; }
.latest-portfolio-card-style-two .pf-img { height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
@media (min-width: 1200px) { .latest-portfolio-card-style-two .pf-img { aspect-ratio: auto; } }
.fit-shot { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; border-radius: 20px; }

/* Project modal */
.pm-title { display: block; }
.pm-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 10px; list-style: none; }
.pm-tags li { margin: 0; padding: 4px 14px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 14px; color: var(--color-body); }
#exampleModalCenter .portfolio-popup-thumbnail img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; border-radius: 10px; }

.footer-note { color: var(--color-body); max-width: 340px; }

/* Skills reuse the price-plan cards; the "price" line holds a short skill name */
#skills .price-plan-card .main-price { font-size: 34px; line-height: 1.25; }

/* Phones and tablets: a faded crop of the portrait sits on top, text below it */
@media (max-width: 991px) {
  .tmp-banner-one-area.style-2 {
    background-image: url(../images/hero-portrait-mobile.jpg);
    background-size: min(100%, 640px) auto;
    background-position: right 70px;
    background-repeat: no-repeat;
    background-color: #010a10;
    padding-top: min(620px, 96vw);
  }
}

/* Project modal: labelled problem / build / result paragraphs */
.pm-desc p { margin-bottom: 12px; font-size: 16px; line-height: 1.6; }
.pm-desc strong { color: var(--color-primary, #139bfd); }
@media (min-width: 992px) { #exampleModalCenter .text-content { max-height: 72vh; overflow-y: auto; padding-right: 8px; } }

/* Designed covers (MCP, video pipeline) show whole; their navy edge matches the box */
.img-box.v2:has(.pf-fit) { background: #030d14; border-radius: 10px; }
.latest-portfolio-card-style-two .pf-img.pf-fit { object-fit: contain; object-position: center; }