/* =========================================================
   Website & Web App portfolio (portfolio/website-portfolio.php) and
   Mobile App portfolio (portfolio/mobile-app-portfolio.php, .web-hero--app)
   Built from Figma "RYH portfolio 2.0" → frames "Website & Web App" (7:5894)
   and "Mobile App Development Portfolio" (8:11195)
   Desktop reference width: 1440px
   ========================================================= */

body.web-page {
    background-color: var(--color-bg-dark, #0a0b0e) !important;
    background-image: 
        radial-gradient(ellipse at 50% 0%, rgba(35, 39, 52, 0.5) 0%, rgba(10, 11, 14, 0.88) 75%),
        url('../../../assets/dark-bg-tile.jpg') !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-size: 750px !important;
    color: #fff;
}

.web-main {
    position: relative;
    overflow: hidden;
    padding: 0 16px 100px;
}

.web-glow {
    position: absolute;
    width: 1050px;
    height: 460px;
    border-radius: 50%;
    background: #f6ff00;
    opacity: 0.12;
    filter: blur(180px);
    pointer-events: none;
    mix-blend-mode: screen;
}

.web-glow--1 { left: calc(50% - 1040px); top: 266px; }
.web-glow--2 { left: calc(50% - 707px); top: 1219px; }

/* ---------- HERO ---------- */
.web-hero {
    position: relative;
    max-width: 1440px;
    height: 508px;
    margin: 0 auto;
    padding-top: 106px;
    text-align: center;
}

.web-hero__object {
    position: absolute;
    top: 78px;
    left: calc(50% + 572px);
    width: 401px;
    height: 383px;
    object-fit: contain;
    filter: blur(10px);
    transform: rotate(-18deg);
    pointer-events: none;
}

.web-hero__logo {
    display: block;
    width: 149px;
    height: auto;
    margin: 0 auto;
}

.web-hero__title {
    margin: 27px 0 0;
}

.web-hero__title-main {
    display: block;
    font-family: 'Funnel Display', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 114.8px;
    line-height: 1.245;
    letter-spacing: -3.92px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #d1fc0d;
    text-shadow: 4.8px 4.8px 24.2px rgba(209, 252, 13, 0.25), -4.8px -4.8px 25.4px rgba(209, 252, 13, 0.25);
}

.web-hero__title-script {
    display: block;
    width: 608px;
    height: auto;
    margin: -38px auto 0;
    transform: translateX(28px);
}

/* Mobile App page ("MOBILE APP" is set larger than "WEBSITE & WEB-APP") */
.web-hero--app {
    height: 556px;
    padding-top: 114px;
}

.web-hero--app .web-hero__title {
    margin-top: -19px;
}

.web-hero--app .web-hero__title-main {
    font-size: 171.6px;
    letter-spacing: -5.86px;
}

.web-hero--app .web-hero__title-script {
    margin-top: -64px;
}

/* ---------- PROJECT ROWS ---------- */
.web-projects {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.web-project {
    display: grid;
    grid-template-columns: 573px 547px;
    justify-content: space-between;
    align-items: center;
}

/* Every second row puts the card on the right */
.web-project:nth-child(even) .web-card {
    order: 2;
}

.web-card {
    position: relative;
    margin: 0;
    border-radius: 32px;
    overflow: hidden;
    background: #1a1a1a;
}

.web-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.web-project:hover .web-card img {
    transform: scale(1.03);
}

.web-card__tag {
    position: absolute;
    top: 28px;
    left: 28px;
    padding: 8px 10px;
    border-radius: 99px;
    background: #d1fc0d;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 15px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #000;
}

.web-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.web-info__logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.web-info__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 60px;
    margin: 0;
}

.web-info__meta div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.web-info__meta dt {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.15;
    color: #d8d8d8;
}

.web-info__meta dd {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #fff;
}

.web-info__text {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: #fff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1260px) {
    .web-project {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
    }

    .web-hero__object { left: auto; right: -260px; }
}

@media (max-width: 1100px) {
    .web-hero { height: auto; padding: 80px 0 72px; }
    .web-hero__title-main { font-size: clamp(28px, 8.2vw, 100px); letter-spacing: -0.034em; }
    .web-hero__title-script { width: clamp(220px, 50vw, 540px); margin-top: -2.8vw; transform: translateX(2vw); }
    .web-hero__object { display: none; }

    .web-hero--app { height: auto; padding: 80px 0 72px; }
    .web-hero--app .web-hero__title { margin-top: 12px; }
    .web-hero--app .web-hero__title-main { font-size: clamp(40px, 12.5vw, 150px); }
    .web-hero--app .web-hero__title-script { margin-top: -3.5vw; }

    .web-info { gap: 28px; }
}

/* Tablet & phone: card on top, details below */
@media (max-width: 767.98px) {
    .web-main { padding-bottom: 64px; }
    .web-glow { width: 700px; height: 320px; filter: blur(120px); }
    .web-glow--1 { left: -420px; top: 260px; }
    .web-glow--2 { left: -160px; top: 1100px; }

    .web-hero { padding: 48px 0; }
    .web-hero__logo { width: 112px; }
    .web-hero__title { margin-top: 16px; }
    .web-hero--app { padding: 48px 0; }

    .web-projects { gap: 64px; max-width: 560px; }

    .web-project {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .web-project:nth-child(even) .web-card { order: 0; }

    .web-card { border-radius: 24px; }
    .web-card__tag { top: 18px; left: 18px; font-size: 13px; line-height: 13px; }

    .web-info { gap: 22px; }
    .web-info__logo { max-width: min(100%, 240px); }
    .web-info__meta { gap: 16px 36px; }
    .web-info__text { font-size: 15px; line-height: 24px; }
}