/* ============================================================
   PAGADIAN MOSAIC — Cultural visual identity layer
   Love-the-Philippines mosaic ribbon, tile patterns, sunset
   gradient utilities, festival accents. Loaded after base.
   ============================================================ */

/* ============================================================
   1. MOSAIC RIBBON — horizontal band of LTP tiles
   Used between hero and content as cultural anchor
   ============================================================ */

.mosaic-ribbon {
    position: relative;
    display: flex;
    height: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(255, 107, 61, 0.14);
}

.mosaic-ribbon span {
    flex: 1;
    height: 100%;
    transition: flex var(--motion-medium) var(--ease-standard);
}

.mosaic-ribbon:hover span {
    flex: 1;
}

.mosaic-ribbon:hover span:hover {
    flex: 1.6;
}

.mosaic-ribbon span:nth-child(1)  { background: var(--mosaic-coral); }
.mosaic-ribbon span:nth-child(2)  { background: var(--mosaic-papaya); }
.mosaic-ribbon span:nth-child(3)  { background: var(--mosaic-mango); }
.mosaic-ribbon span:nth-child(4)  { background: var(--mosaic-lime); }
.mosaic-ribbon span:nth-child(5)  { background: var(--mosaic-teal); }
.mosaic-ribbon span:nth-child(6)  { background: var(--mosaic-indigo); }
.mosaic-ribbon span:nth-child(7)  { background: var(--mosaic-violet); }
.mosaic-ribbon span:nth-child(8)  { background: var(--mosaic-pink); }

.mosaic-ribbon-thick {
    height: 32px;
}
.mosaic-ribbon-thin {
    height: 6px;
}

/* ============================================================
   2. MOSAIC TILE GRID — quilted hero band (LTP signature)
   8×N grid of colored tiles with subtle white grout, used as
   cultural signature in welcome strip / footer cap.
   ============================================================ */

.mosaic-quilt {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 3px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-md);
}

.mosaic-quilt .tile {
    aspect-ratio: 1;
    border-radius: 4px;
    transition: transform var(--motion-medium) var(--ease-bounce),
                box-shadow var(--motion-medium) var(--ease-standard);
}

.mosaic-quilt .tile:hover {
    transform: scale(1.18) rotate(-2deg);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.tile-coral   { background: var(--mosaic-coral); }
.tile-pink    { background: var(--mosaic-pink); }
.tile-mango   { background: var(--mosaic-mango); }
.tile-teal    { background: var(--mosaic-teal); }
.tile-violet  { background: var(--mosaic-violet); }
.tile-lime    { background: var(--mosaic-lime); }
.tile-indigo  { background: var(--mosaic-indigo); }
.tile-papaya  { background: var(--mosaic-papaya); }

/* ============================================================
   3. WELCOME STRIP — Pagadian Mosaic introduction band
   Sits between hero and featured destinations
   ============================================================ */

.welcome-strip {
    position: relative;
    padding: var(--space-12) 0 var(--space-10);
    background: var(--gradient-feminine);
    overflow: hidden;
}

.welcome-strip::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 184, 62, 0.35) 0%, transparent 65%);
    pointer-events: none;
}

.welcome-strip::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 168, 157, 0.22) 0%, transparent 65%);
    pointer-events: none;
}

.welcome-strip .container { position: relative; z-index: 1; }

.welcome-strip-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-10);
    align-items: center;
}

.welcome-strip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mosaic-coral);
    box-shadow: 0 2px 12px rgba(255, 107, 61, 0.12);
    margin-bottom: var(--space-4);
}

.welcome-strip-eyebrow i { color: var(--mosaic-pink); }

.welcome-strip h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--rosewood);
    margin-bottom: var(--space-4);
}

.welcome-strip h2 em {
    font-style: italic;
    background: var(--gradient-festival);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-strip-lede {
    max-width: 560px;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-gray-700);
    margin-bottom: var(--space-6);
}

.welcome-strip-stamps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.stamp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-gray-700);
    box-shadow: 0 2px 10px rgba(255, 107, 61, 0.10);
    border: 1px solid rgba(255, 107, 61, 0.10);
}

.stamp i { color: var(--mosaic-coral); }
.stamp-teal i  { color: var(--mosaic-teal); }
.stamp-mango i { color: var(--mosaic-mango); }
.stamp-violet i{ color: var(--mosaic-violet); }
.stamp-pink i  { color: var(--mosaic-pink); }

/* Mosaic medallion on the right side of welcome strip */
.welcome-medallion {
    width: 220px;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: var(--shadow-mosaic);
    animation: medallionRotate 60s linear infinite;
    flex-shrink: 0;
}

.welcome-medallion span {
    border-radius: 50%;
    transition: transform var(--motion-medium) var(--ease-bounce);
}

.welcome-medallion span:hover {
    transform: scale(1.25);
}

@keyframes medallionRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* The 16 mosaic dots (assigned in HTML order) */
.welcome-medallion span:nth-child(1)  { background: var(--mosaic-coral); }
.welcome-medallion span:nth-child(2)  { background: var(--mosaic-mango); }
.welcome-medallion span:nth-child(3)  { background: var(--mosaic-teal); }
.welcome-medallion span:nth-child(4)  { background: var(--mosaic-pink); }
.welcome-medallion span:nth-child(5)  { background: var(--mosaic-papaya); }
.welcome-medallion span:nth-child(6)  { background: var(--mosaic-violet); }
.welcome-medallion span:nth-child(7)  { background: var(--mosaic-lime); }
.welcome-medallion span:nth-child(8)  { background: var(--mosaic-indigo); }
.welcome-medallion span:nth-child(9)  { background: var(--mosaic-mango); }
.welcome-medallion span:nth-child(10) { background: var(--mosaic-pink); }
.welcome-medallion span:nth-child(11) { background: var(--mosaic-coral); }
.welcome-medallion span:nth-child(12) { background: var(--mosaic-teal); }
.welcome-medallion span:nth-child(13) { background: var(--mosaic-violet); }
.welcome-medallion span:nth-child(14) { background: var(--mosaic-papaya); }
.welcome-medallion span:nth-child(15) { background: var(--mosaic-indigo); }
.welcome-medallion span:nth-child(16) { background: var(--mosaic-lime); }

@media (max-width: 900px) {
    .welcome-strip-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .welcome-medallion {
        margin: 0 auto;
        width: 180px;
    }
    .welcome-strip-stamps {
        justify-content: center;
    }
}

/* ============================================================
   4. SUNSET GRADIENT UTILITIES
   ============================================================ */

.bg-sunset    { background: var(--gradient-sunset); }
.bg-mosaic    { background: var(--gradient-mosaic); }
.bg-bay       { background: var(--gradient-bay); }
.bg-festival  { background: var(--gradient-festival); }
.bg-feminine  { background: var(--gradient-feminine); }
.bg-cream     { background: var(--cream); }
.bg-blush     { background: var(--blush); }
.bg-shell     { background: var(--shell); }

.text-sunset {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-festival {
    background: var(--gradient-festival);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   5. SECTION DIVIDER — mosaic dot trail
   Lightweight cultural break between sections
   ============================================================ */

.section-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: var(--space-6) 0;
}

.section-divider span {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: transform var(--motion-medium) var(--ease-bounce);
}

.section-divider span:nth-child(1) { background: var(--mosaic-coral); }
.section-divider span:nth-child(2) { background: var(--mosaic-mango); }
.section-divider span:nth-child(3) { background: var(--mosaic-teal); }
.section-divider span:nth-child(4) { background: var(--mosaic-pink); }
.section-divider span:nth-child(5) { background: var(--mosaic-violet); }

.section-divider:hover span:nth-child(odd) {
    transform: translateY(-4px) scale(1.1);
}

/* ============================================================
   6. MOSAIC CARD ACCENT
   Cards get a 4-color top stripe instead of plain border
   ============================================================ */

.card-mosaic-top {
    position: relative;
}

.card-mosaic-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--mosaic-coral)  0%,  var(--mosaic-coral)  25%,
        var(--mosaic-mango) 25%,  var(--mosaic-mango) 50%,
        var(--mosaic-teal)  50%,  var(--mosaic-teal)  75%,
        var(--mosaic-pink)  75%,  var(--mosaic-pink) 100%);
    z-index: 2;
}

/* ============================================================
   7. FEMININE BUTTON VARIANTS
   ============================================================ */

.btn-coral {
    background: var(--mosaic-coral);
    color: #fff;
    border-color: transparent;
}
.btn-coral:hover {
    background: var(--color-ocean-dark);
    color: #fff;
}

.btn-pink {
    background: var(--mosaic-pink);
    color: #fff;
    border-color: transparent;
}
.btn-pink:hover {
    background: #D81B69;
    color: #fff;
}

.btn-mango {
    background: var(--mosaic-mango);
    color: var(--rosewood);
    border-color: transparent;
}
.btn-mango:hover {
    background: var(--color-gold-dark);
    color: var(--rosewood);
}

.btn-teal {
    background: var(--mosaic-teal);
    color: #fff;
    border-color: transparent;
}
.btn-teal:hover {
    background: var(--color-green-dark);
    color: #fff;
}

.btn-sunset {
    background: var(--gradient-sunset);
    color: #fff;
    border-color: transparent;
    background-size: 200% 200%;
    animation: btnSunsetShift 6s ease infinite;
}
.btn-sunset:hover {
    color: #fff;
    box-shadow: 0 12px 28px rgba(255, 107, 61, 0.32);
}

@keyframes btnSunsetShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================================
   8. MOSAIC EYEBROW (section heading kicker)
   ============================================================ */

.mosaic-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    background: var(--blush);
    border: 1px solid rgba(255, 140, 66, 0.18);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mosaic-coral);
    margin-bottom: var(--space-3);
}

.mosaic-eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--mosaic-pink);
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.18);
}

/* ============================================================
   9. CULTURAL HERO CAPTION (under photo carousel)
   ============================================================ */

.hero-cultural-caption {
    position: absolute;
    bottom: calc(var(--space-12) + 40px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-cultural-caption .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--mosaic-mango);
    box-shadow: 0 0 12px rgba(244, 184, 62, 0.6);
    animation: dotPulse 2.4s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.25); }
}

/* ============================================================
   10. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .welcome-medallion,
    .btn-sunset,
    .hero-cultural-caption .dot {
        animation: none !important;
    }
    .mosaic-ribbon span,
    .mosaic-quilt .tile,
    .welcome-medallion span,
    .section-divider span {
        transition: none !important;
    }
}