/**
 * Responsive Design - Media Queries for All Screen Sizes
 */

/* Large Tablet Design */
@media (max-width: 1024px) {
    .hero-title { font-size: clamp(2.5rem, 6vw, 3rem); }
    .hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.1rem); }
    
    .religion-circles-container {
        width: 500px;
        height: 500px;
        margin: 3rem auto;
        max-width: 85vw;
    }
    
    .religion-circle.inner-circle {
        width: 60%;
        height: 60%;
        top: 20%;
        left: 20%;
    }
    
    .religion-circle.outer-circle {
        width: 100%;
        height: 100%;
    }
    
    /* Adjust hover box position for tablet */
    .religion-details {
        top: 50%;
        left: 50%;
        width: 500px;
    }
    
    .details-card { 
        width: 500px; 
    }
    
    /* Switch to mobile-friendly layout */
    .journey-instructions {
        margin-top: 2rem;
    }
    
    .instruction-text {
        font-size: 0.95rem;
    }
}

/* Tablet Design */
@media (max-width: 768px) {
    .sanctuary-content {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .hero-title { 
        font-size: clamp(2rem, 8vw, 2.5rem); 
        margin-bottom: 0.5rem;
    }
    .hero-subtitle { 
        font-size: clamp(0.9rem, 3vw, 1rem); 
    }
    
    .hero-sanctuary {
        padding: 1rem 0;
        min-height: auto;
    }
    
    .sacred-center {
        margin-bottom: 2rem;
    }
    
    .center-symbol {
        width: 140px;
        height: 140px;
        margin: 0 auto 1.5rem;
    }
    
    .symbol-inner {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .ring-1 { width: 120px; height: 120px; top: 10px; left: 10px; }
    .ring-2 { width: 130px; height: 130px; top: 5px; left: 5px; }
    .ring-3 { width: 140px; height: 140px; top: 0; left: 0; }
    
    .religion-image-container {
        width: 80px;
        height: 80px;
        margin: -40px 0 0 -40px;
    }
    
    .religion-circles-container {
        width: 100%;
        max-width: min(360px, 85vw);
        height: min(360px, 85vw);
        margin: 1.5rem auto;
        overflow: visible;
        box-sizing: border-box;
    }
    
    .religion-circle.inner-circle {
        width: 55%;
        height: 55%;
        top: 22.5%;
        left: 22.5%;
    }
    
    .religion-circle.outer-circle {
        width: 75%;
        height: 75%;
        top: 12.5%;
        left: 12.5%;
    }
    
    /* Adjust hover box position for mobile */
    .religion-details {
        top: 50%;
        left: 50%;
        max-width: min(360px, 85vw);
        min-width: min(320px, 80vw);
        z-index: 1001;
    }
    
    .religion-orb {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        /* Increase touch target for mobile */
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Override PHP inline transforms with reduced radius */
    .inner-circle .religion-orb[style*="transform"] {
        transform: none !important;
    }
    
    .outer-circle .religion-orb[style*="transform"] {
        transform: none !important;
    }
    
    /* Properly distribute inner circle orbs (up to 5 free religions) */
    .inner-circle .religion-orb:nth-child(1) { transform: translate(0, -35px) !important; }
    .inner-circle .religion-orb:nth-child(2) { transform: translate(33px, -11px) !important; }
    .inner-circle .religion-orb:nth-child(3) { transform: translate(21px, 28px) !important; }
    .inner-circle .religion-orb:nth-child(4) { transform: translate(-21px, 28px) !important; }
    .inner-circle .religion-orb:nth-child(5) { transform: translate(-33px, -11px) !important; }
    
    /* Properly distribute outer circle orbs (limited to 6 premium religions) */
    .outer-circle .religion-orb:nth-child(1) { transform: translate(0, -105px) !important; }
    .outer-circle .religion-orb:nth-child(2) { transform: translate(91px, -52px) !important; }
    .outer-circle .religion-orb:nth-child(3) { transform: translate(91px, 52px) !important; }
    .outer-circle .religion-orb:nth-child(4) { transform: translate(0, 105px) !important; }
    .outer-circle .religion-orb:nth-child(5) { transform: translate(-91px, 52px) !important; }
    .outer-circle .religion-orb:nth-child(6) { transform: translate(-91px, -52px) !important; }
    
    /* Hide extra outer circle orbs if more than 6 */
    .outer-circle .religion-orb:nth-child(n+7) { display: none !important; }
    
    .orb-inner { 
        font-size: 1.2rem;
        /* Ensure touch target meets accessibility guidelines */
        min-height: 44px;
        min-width: 44px;
    }
    
    .premium-badge {
        width: 18px;
        height: 18px;
        font-size: 0.65rem;
        top: -7px;
        right: -7px;
    }
    
    /* Mobile responsive card sizing */
    .details-card { 
        width: 100%;
        padding: 1.5rem;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .invitation-actions {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .sacred-btn {
        width: 280px;
        justify-content: center;
        padding: 1rem 1.5rem;
    }
    
    /* Optimize connection lines for mobile */
    .inner-lines .connection-line {
        width: 90px;
    }
    
    .outer-lines .connection-line.premium-line {
        width: 150px;
    }
    
    /* Mobile spacing fixes */
    .journey-instructions {
        margin-top: 1.5rem;
    }
    
    .hero-sanctuary {
        min-height: 70vh;
    }
    
    /* Journey steps optimization */
    .journey-steps {
        padding: 2rem 0;
    }
    
    .sacred-center {
        margin-bottom: 1rem;
    }
}

/* Small Mobile Design */
@media (max-width: 480px) {
    .hero-title { 
        font-size: clamp(1.75rem, 10vw, 2rem);
        letter-spacing: 1px;
    }
    .hero-subtitle { 
        font-size: clamp(0.85rem, 4vw, 0.95rem); 
    }
    
    .center-symbol {
        width: 100px;
        height: 100px;
        margin: 0 auto 1rem;
    }
    
    .symbol-inner {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .ring-1 { width: 80px; height: 80px; top: 10px; left: 10px; }
    .ring-2 { width: 90px; height: 90px; top: 5px; left: 5px; }
    .ring-3 { width: 100px; height: 100px; top: 0; left: 0; }
    
    .religion-image-container {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }
    
    .religion-circles-container {
        width: 100%;
        max-width: min(320px, 75vw);
        height: min(320px, 75vw);
        margin: 1rem auto;
        overflow: visible;
        padding: 0;
        box-sizing: border-box;
    }
    
    .religion-circle.inner-circle {
        width: 60%;
        height: 60%;
        top: 20%;
        left: 20%;
    }
    
    .religion-circle.outer-circle {
        width: 70%;
        height: 70%;
        top: 15%;
        left: 15%;
    }
    
    /* Adjust hover box position for small mobile */
    .religion-details {
        top: 50%;
        left: 50%;
        max-width: min(320px, 75vw);
        min-width: min(280px, 70vw);
        z-index: 1001;
    }
    
    .religion-orb {
        width: 45px;
        height: 45px;
        margin: -22px 0 0 -22px;
        /* Ensure proper touch targets */
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Further reduced positioning for tiny screens */
    .inner-circle .religion-orb:nth-child(1) { transform: translate(0, -30px) !important; }
    .inner-circle .religion-orb:nth-child(2) { transform: translate(28px, -9px) !important; }
    .inner-circle .religion-orb:nth-child(3) { transform: translate(18px, 24px) !important; }
    .inner-circle .religion-orb:nth-child(4) { transform: translate(-18px, 24px) !important; }
    .inner-circle .religion-orb:nth-child(5) { transform: translate(-28px, -9px) !important; }
    
    .outer-circle .religion-orb:nth-child(1) { transform: translate(0, -85px) !important; }
    .outer-circle .religion-orb:nth-child(2) { transform: translate(74px, -43px) !important; }
    .outer-circle .religion-orb:nth-child(3) { transform: translate(74px, 43px) !important; }
    .outer-circle .religion-orb:nth-child(4) { transform: translate(0, 85px) !important; }
    .outer-circle .religion-orb:nth-child(5) { transform: translate(-74px, 43px) !important; }
    .outer-circle .religion-orb:nth-child(6) { transform: translate(-74px, -43px) !important; }
    
    .orb-inner { 
        font-size: 1.1rem;
        min-height: 40px;
        min-width: 40px;
    }
    
    .premium-badge {
        width: 16px;
        height: 16px;
        font-size: 0.6rem;
        top: -6px;
        right: -6px;
    }
    
    .details-card {
        width: 100%;
        padding: 1.25rem;
    }
    
    .journey-instructions {
        margin-top: 1rem;
    }
    
    .hero-sanctuary {
        min-height: 60vh;
    }
    
    .instruction-text {
        font-size: 0.9rem;
    }
    
    .steps-header h2 {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }
    
    .step-card {
        padding: 1.5rem;
    }
    
    .invitation-content h2 {
        font-size: clamp(1.75rem, 8vw, 2rem);
    }
    
    .invitation-content p {
        font-size: 1rem;
    }
    
    .sacred-btn {
        width: 260px;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }
    
    .inner-lines .connection-line {
        width: 70px;
    }
    
    .outer-lines .connection-line.premium-line {
        width: 120px;
    }
}

/* Ultra-small screens */
@media (max-width: 320px) {
    .religion-circles-container {
        max-width: 90vw;
        height: 90vw;
    }
    
    .religion-details {
        top: 50%;
        left: 50%;
        max-width: min(300px, 90vw);
        min-width: min(260px, 85vw);
        z-index: 1001;
    }
    
    .details-card {
        width: 100%;
        padding: 1rem;
    }
    
    .sacred-btn {
        width: 240px;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}