/* Arc Hero Block - True circular arc positioning */

/* Typography */
.arc-hero-block h1,
.arc-hero-block h2,
.arc-hero-block h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.arc-hero-block .arc-hero-tagline {
    font-family: 'Cormorant Garamond', serif;
}

.arc-hero-block p,
.arc-hero-block a {
    font-family: 'Lato', sans-serif;
}

.arc-hero-block .arc-gallery {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 540px;
    margin: 0 auto;
}

.arc-hero-block .arc-item {
    position: absolute;
    width: 120px;
    height: 120px;
    /* Items positioned from center-bottom using left/bottom with calc */
}

.arc-hero-block .arc-item img,
.arc-hero-block .arc-item>div {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/*
 * Arc positions calculated with trigonometry:
 * startAngle = 20°, endAngle = 160°, radius = 480px
 * x = cos(angle) * radius
 * y = sin(angle) * radius
 * rotation = 90 - angle
 *
 * Position: left = calc(50% + x - cardSize/2), bottom = y - cardSize/2
 */

/* Image 1: angle=20° */
.arc-hero-block .arc-item:nth-child(1) {
    left: calc(50% + 451px - 60px);
    bottom: 104px;
    transform: rotate(70deg);
}

/* Image 2: angle=35.56° */
.arc-hero-block .arc-item:nth-child(2) {
    left: calc(50% + 390px - 60px);
    bottom: 219px;
    transform: rotate(54.44deg);
}

/* Image 3: angle=51.11° */
.arc-hero-block .arc-item:nth-child(3) {
    left: calc(50% + 302px - 60px);
    bottom: 313px;
    transform: rotate(38.89deg);
}

/* Image 4: angle=66.67° */
.arc-hero-block .arc-item:nth-child(4) {
    left: calc(50% + 189px - 60px);
    bottom: 381px;
    transform: rotate(23.33deg);
}

/* Image 5: angle=82.22° */
.arc-hero-block .arc-item:nth-child(5) {
    left: calc(50% + 65px - 60px);
    bottom: 416px;
    transform: rotate(7.78deg);
}

/* Image 6: angle=97.78° */
.arc-hero-block .arc-item:nth-child(6) {
    left: calc(50% - 65px - 60px);
    bottom: 416px;
    transform: rotate(-7.78deg);
}

/* Image 7: angle=113.33° */
.arc-hero-block .arc-item:nth-child(7) {
    left: calc(50% - 189px - 60px);
    bottom: 381px;
    transform: rotate(-23.33deg);
}

/* Image 8: angle=128.89° */
.arc-hero-block .arc-item:nth-child(8) {
    left: calc(50% - 302px - 60px);
    bottom: 313px;
    transform: rotate(-38.89deg);
}

/* Image 9: angle=144.44° */
.arc-hero-block .arc-item:nth-child(9) {
    left: calc(50% - 390px - 60px);
    bottom: 219px;
    transform: rotate(-54.44deg);
}

/* Image 10: angle=160° */
.arc-hero-block .arc-item:nth-child(10) {
    left: calc(50% - 451px - 60px);
    bottom: 104px;
    transform: rotate(-70deg);
}

/* Hover effect */
.arc-hero-block .arc-item:hover {
    z-index: 10;
}

.arc-hero-block .arc-item:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* =============================================
   TABLET: radius=360px, cardSize=100px
   ============================================= */
@media (max-width: 1024px) {
    .arc-hero-block .arc-gallery {
        max-width: 800px;
        height: 420px;
    }

    .arc-hero-block .arc-item {
        width: 100px;
        height: 100px;
    }

    /* Image 1: angle=20° */
    .arc-hero-block .arc-item:nth-child(1) {
        left: calc(50% + 338px - 50px);
        bottom: 73px;
        transform: rotate(70deg);
    }

    /* Image 2: angle=35.56° */
    .arc-hero-block .arc-item:nth-child(2) {
        left: calc(50% + 293px - 50px);
        bottom: 160px;
        transform: rotate(54.44deg);
    }

    /* Image 3: angle=51.11° */
    .arc-hero-block .arc-item:nth-child(3) {
        left: calc(50% + 226px - 50px);
        bottom: 230px;
        transform: rotate(38.89deg);
    }

    /* Image 4: angle=66.67° */
    .arc-hero-block .arc-item:nth-child(4) {
        left: calc(50% + 142px - 50px);
        bottom: 281px;
        transform: rotate(23.33deg);
    }

    /* Image 5: angle=82.22° */
    .arc-hero-block .arc-item:nth-child(5) {
        left: calc(50% + 49px - 50px);
        bottom: 307px;
        transform: rotate(7.78deg);
    }

    /* Image 6: angle=97.78° */
    .arc-hero-block .arc-item:nth-child(6) {
        left: calc(50% - 49px - 50px);
        bottom: 307px;
        transform: rotate(-7.78deg);
    }

    /* Image 7: angle=113.33° */
    .arc-hero-block .arc-item:nth-child(7) {
        left: calc(50% - 142px - 50px);
        bottom: 281px;
        transform: rotate(-23.33deg);
    }

    /* Image 8: angle=128.89° */
    .arc-hero-block .arc-item:nth-child(8) {
        left: calc(50% - 226px - 50px);
        bottom: 230px;
        transform: rotate(-38.89deg);
    }

    /* Image 9: angle=144.44° */
    .arc-hero-block .arc-item:nth-child(9) {
        left: calc(50% - 293px - 50px);
        bottom: 160px;
        transform: rotate(-54.44deg);
    }

    /* Image 10: angle=160° */
    .arc-hero-block .arc-item:nth-child(10) {
        left: calc(50% - 338px - 50px);
        bottom: 73px;
        transform: rotate(-70deg);
    }
}

/* =============================================
   MOBILE: radius=220px, cardSize=70px
   ============================================= */
@media (max-width: 768px) {
    .arc-hero-block .arc-gallery {
        max-width: 100%;
        height: 280px;
    }

    .arc-hero-block .arc-item {
        width: 70px;
        height: 70px;
    }

    .arc-hero-block .arc-item img,
    .arc-hero-block .arc-item>div {
        border-radius: 0.75rem;
    }

    /* Image 1: angle=20° */
    .arc-hero-block .arc-item:nth-child(1) {
        left: calc(50% + 207px - 35px);
        bottom: 40px;
        transform: rotate(70deg);
    }

    /* Image 2: angle=35.56° */
    .arc-hero-block .arc-item:nth-child(2) {
        left: calc(50% + 179px - 35px);
        bottom: 93px;
        transform: rotate(54.44deg);
    }

    /* Image 3: angle=51.11° */
    .arc-hero-block .arc-item:nth-child(3) {
        left: calc(50% + 138px - 35px);
        bottom: 136px;
        transform: rotate(38.89deg);
    }

    /* Image 4: angle=66.67° */
    .arc-hero-block .arc-item:nth-child(4) {
        left: calc(50% + 87px - 35px);
        bottom: 167px;
        transform: rotate(23.33deg);
    }

    /* Image 5: angle=82.22° */
    .arc-hero-block .arc-item:nth-child(5) {
        left: calc(50% + 30px - 35px);
        bottom: 183px;
        transform: rotate(7.78deg);
    }

    /* Image 6: angle=97.78° */
    .arc-hero-block .arc-item:nth-child(6) {
        left: calc(50% - 30px - 35px);
        bottom: 183px;
        transform: rotate(-7.78deg);
    }

    /* Image 7: angle=113.33° */
    .arc-hero-block .arc-item:nth-child(7) {
        left: calc(50% - 87px - 35px);
        bottom: 167px;
        transform: rotate(-23.33deg);
    }

    /* Image 8: angle=128.89° */
    .arc-hero-block .arc-item:nth-child(8) {
        left: calc(50% - 138px - 35px);
        bottom: 136px;
        transform: rotate(-38.89deg);
    }

    /* Image 9: angle=144.44° */
    .arc-hero-block .arc-item:nth-child(9) {
        left: calc(50% - 179px - 35px);
        bottom: 93px;
        transform: rotate(-54.44deg);
    }

    /* Image 10: angle=160° */
    .arc-hero-block .arc-item:nth-child(10) {
        left: calc(50% - 207px - 35px);
        bottom: 40px;
        transform: rotate(-70deg);
    }
}

/* =============================================
   SMALL MOBILE: radius=160px, cardSize=55px
   ============================================= */
@media (max-width: 480px) {
    .arc-hero-block .arc-gallery {
        height: 220px;
    }

    .arc-hero-block .arc-item {
        width: 55px;
        height: 55px;
    }

    .arc-hero-block .arc-item img,
    .arc-hero-block .arc-item>div {
        border-radius: 0.5rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    }

    /* Image 1: angle=20° */
    .arc-hero-block .arc-item:nth-child(1) {
        left: calc(50% + 150px - 27px);
        bottom: 27px;
        transform: rotate(70deg);
    }

    /* Image 2: angle=35.56° */
    .arc-hero-block .arc-item:nth-child(2) {
        left: calc(50% + 130px - 27px);
        bottom: 65px;
        transform: rotate(54.44deg);
    }

    /* Image 3: angle=51.11° */
    .arc-hero-block .arc-item:nth-child(3) {
        left: calc(50% + 100px - 27px);
        bottom: 97px;
        transform: rotate(38.89deg);
    }

    /* Image 4: angle=66.67° */
    .arc-hero-block .arc-item:nth-child(4) {
        left: calc(50% + 63px - 27px);
        bottom: 119px;
        transform: rotate(23.33deg);
    }

    /* Image 5: angle=82.22° */
    .arc-hero-block .arc-item:nth-child(5) {
        left: calc(50% + 22px - 27px);
        bottom: 131px;
        transform: rotate(7.78deg);
    }

    /* Image 6: angle=97.78° */
    .arc-hero-block .arc-item:nth-child(6) {
        left: calc(50% - 22px - 27px);
        bottom: 131px;
        transform: rotate(-7.78deg);
    }

    /* Image 7: angle=113.33° */
    .arc-hero-block .arc-item:nth-child(7) {
        left: calc(50% - 63px - 27px);
        bottom: 119px;
        transform: rotate(-23.33deg);
    }

    /* Image 8: angle=128.89° */
    .arc-hero-block .arc-item:nth-child(8) {
        left: calc(50% - 100px - 27px);
        bottom: 97px;
        transform: rotate(-38.89deg);
    }

    /* Image 9: angle=144.44° */
    .arc-hero-block .arc-item:nth-child(9) {
        left: calc(50% - 130px - 27px);
        bottom: 65px;
        transform: rotate(-54.44deg);
    }

    /* Image 10: angle=160° */
    .arc-hero-block .arc-item:nth-child(10) {
        left: calc(50% - 150px - 27px);
        bottom: 27px;
        transform: rotate(-70deg);
    }
}