/* src/css/bride.css - ASYMMETRICAL PILL LAYOUT */

/* ─── BASE SECTION (DARK THEME + BOTTOM TEAR) ───────────────────────────── */
.bride {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    background: 
        linear-gradient(
            rgba(122, 17, 17, 0.85) 0%, 
            rgba(122, 17, 17, 0.85) calc(100% - 60px), 
            transparent calc(100% - 60px), 
            transparent 100%
        ),
        url('../../../themes/modern_minang/img/bg_songket.png') !important;
    background-size: 100% 100%, 100% auto !important;
    background-repeat: no-repeat, repeat !important;
    border-top-left-radius: 110px !important;
    border-top: 3px solid var(--accent-color, #d4af37) !important;
    border-left: 3px solid var(--accent-color, #d4af37) !important;
    padding: 48px 0 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip; 
    z-index: 3; 
}

/* TORN PAPER BOTTOM EDGE ONLY */
.bride::before {
    content: '';
    position: absolute;
    bottom: -15px; /* Menggantung bebas melebihi batas section */
    height: 120px; /* Cukup tinggi untuk menyelinap aman ke balik latar transparan (gradient atas) */
    left: -30px;
    right: -30px;
    background: 
        linear-gradient(rgba(122, 17, 17, 0.85), rgba(122, 17, 17, 0.85)),
        url('../../../themes/modern_minang/img/bg_songket.png') !important;
    background-size: 100% 100%, 100% auto !important;
    background-repeat: no-repeat, repeat !important;
    background-position: bottom left !important;
    z-index: -1; /* Bersembunyi di balik latar gradient utama .bride */
    filter: url('#torn-paper');
    /* clip-path dihapus penuh karena memicu limitasi bounding-box pada engine render Chrome/Safari */
}

.bride::after {
    content: '';
    position: absolute;
    bottom: -25px; /* Didorong lebih jauh ke bawah dari ::before (-15px) agar kertas sekundernya (yang transparan) ngintip di balik layer pertama */
    height: 130px; /* Ditinggikan agar kepalanya tetap tersembunyi dengan aman di atas batas gradien pembatas */
    left: -30px;
    right: -30px;
    background: 
        linear-gradient(rgba(122, 17, 17, 0.85), rgba(122, 17, 17, 0.85)),
        url('../../../themes/modern_minang/img/bg_songket.png') !important;
    background-size: 100% 100%, 100% auto !important;
    background-repeat: no-repeat, repeat !important;
    background-position: bottom left !important;
    opacity: 0.3; /* Layer tembus pandang / serat robek tipis */
    z-index: -2;
    filter: url('#torn-paper');
}

/* Decorative Lotties */
.bride-lottie-center {
    width: 140px;
    margin-bottom: 16px;
}
.bride-lottie {
    position: absolute;
    top: 40px;
    left: 8px;
    width: 100px;
    opacity: 0.5;
}

/* ─── GREETING ROTATOR (Rolling Text) ───────── */
.greeting-rotator {
    position: relative;
    min-height: 72px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.greeting-line {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
    color: var(--ticket-text-bright);
    text-align: center;
    line-height: 1.75;
    padding: 0 28px;
    letter-spacing: 0.02em;
    margin: 0;
    word-break: break-word;
}

/* Per-character wrapper — holds perspective for 3D flip */
.greeting-char {
    position: relative;
    display: inline-block;
    perspective: 800px;
}

/* The visible face that animates */
.greeting-char-face {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* default origin for exit (fold upward) */
    transform-origin: 50% 25%;
}

/* Invisible placeholder that holds the character's width */
.greeting-char-ph {
    visibility: hidden;
    display: inline-block;
}

/* Horizontal divider line (mengganti dot indicator) */
.greeting-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 0 40px;
    width: 100%;
    max-width: 480px;
}

.greeting-divider::before,
.greeting-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--ticket-text-bright),
        transparent
    );
    opacity: 0.45;
}

.greeting-divider i {
    font-size: 0.5rem;
    color: var(--ticket-text-bright);
    opacity: 0.7;
    flex-shrink: 0;
}

/* ─── Typography Header ──────────────────────── */
.bride > p {
    font-family: var(--font-utama, 'Josefin Sans', sans-serif);
    font-size: 0.83rem;
    line-height: 1.65;
    color: var(--ticket-text-bright);
    opacity: 0.9;
    text-align: center;
    max-width: 500px;
    margin: 0 auto 48px auto;
    padding: 0 24px;
}

/*  PILL LAYOUT CONTAINER  */
.bride_layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;             /* Jarak normal karena sudah lurus */
    padding-bottom: 32px;
}

/* Wrapper AOS terpisah dari pill agar transform rotate tidak ditimpa */
.pill-aos-wrap {
    display: flex;
    width: 100%;
}
/* Groom wrapper: rata kanan */
.pill-aos-wrap:first-child {
    justify-content: flex-end;
}
/* Bride wrapper: rata kiri */
.pill-aos-wrap:nth-child(2) {
    justify-content: flex-start;
}


/* =========================================================================
   3. DESAIN KOTAK PROFIL (PILL)
   ========================================================================= */

.pill-person {
    position: relative;
    height: 220px;                           /* Tinggi kotak tetap proporsional */
    background: rgba(255, 255, 255, 0.05);   
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 4px solid #fff;                  /* Frame foto putih tebal (tidak polosan) */
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4), 
        inset 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    overflow: hidden;                        /* Memotong gambar bulat */
}

/* Garis emas/aksen di sepanjang tepi dalam */
.pill-person::before {
    content: '';
    position: absolute;
    inset: 5px;                              /* Garis 5px dari tepi */
    border: 1px solid var(--accent-color, #d4af37);
    pointer-events: none;
}

.pill-person__inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;    /* Inner menutupi seluruh pill */
    display: flex;
    width: 100%;
}

/*  PILL GROOM  */
/* Kanan: dipotong rata oleh overflow screen */
/* Kiri: rounded (pill shape) */
.pill-groom {
    width: 90%;                             /* Lebar lurus */
    border-radius: 500px 0 0 500px;          /* SECARA EKSPLISIT DATAR DI KANAN, PILL SEMPURNA DI KIRI */
    margin-right: 0;                     
    margin-top: 0;                           /* Reset margin, gunakan gap layout */
    transform: none;               
    transform-origin: right center;
    z-index: 2;
}

.pill-groom::before {
    border-radius: 500px 0 0 500px;
    border-right: none;                      /* Hilangkan garis emas di sisi flat */
}

.pill-groom .pill-person__inner {
    flex-direction: row;                     /* Foto kiri, teks kanan (flat) */
}

.pill-groom .pill-person__name {
    padding-right: 20px;
    justify-content: flex-end;
}
.pill-groom .pill-person__name h4 {
    text-align: right;
    width: 100%;
}

/*  PILL BRIDE  */
/* Kiri: dipotong rata oleh overflow screen */
/* Kanan: rounded (pill shape) */
.pill-bride {
    width: 90%;                             /* Lebar lurus */
    border-radius: 0 500px 500px 0;          /* SECARA EKSPLISIT DATAR DI KIRI, PILL SEMPURNA DI KANAN */
    margin-left: 0;                      
    margin-top: 0px;                        
    transform: none;               
    transform-origin: left center;
    z-index: 2;
}

.pill-bride .pill-person__inner {
    flex-direction: row-reverse;             /* Teks kiri, foto kanan (lengkung) */
}

.pill-bride .pill-person__name {
    padding-left: 20px;
    justify-content: flex-start;
}
.pill-bride .pill-person__name h4 {
    text-align: left;
    width: 100%;
}

/* ─── SHARED PHOTO & NAME ────────────────────── */
.pill-person__photo {
    position: absolute;
    top: 0; left: 0;
    width: 100%;                             /* Foto mengisi seluruh pill */
    height: 100%;
    z-index: 0;                              /* Foto di lapisan paling bawah */
}

.pill-person__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.pill-person__name {
    position: absolute;
    bottom: 0px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;                 /* Teks presisi di tengah secara horizontal */
    padding: 20px;
    z-index: 2;                              /* Teks di atas foto dan gradasi */
}

.pill-person__name h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;                      /* Ukuran diperkecil agar nama lengkap/panjang muat */
    text-align: center;                      /* Teks rata tengah */
    font-style: italic;
    font-weight: 700;
    color: var(--ticket-text-bright, #fff);  /* Memakai warna global terang */
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 10px var(--overlay-black-dark, rgba(0,0,0,0.5)); /* Shadow pakai variabel gelap */
}


/* =========================================================================
   4. KOTAK INFO KEDUA MEMPELAI (PILL INFO)
   ========================================================================= */

/*  PILL INFO (Bawah, full pill)  */
.pill-info {
    margin: 10px 16px 0 16px;               /* Disesuaikan menjadi positif agar tidak menabrak deskripsi lurus */
    background: var(--card-bg-color);        /* Replaced ticket-bg with card-bg-color */
    border-radius: 100px;                    /* Full pill rounded kedua sisi */
    box-shadow: 0 12px 40px var(--shadow-color, rgba(0,0,0,0.12));
    padding: 28px 32px;
    outline: 1px solid var(--card-bg-color); /* Menyesuaikan agar garis pinggir muncul dengan jelas */
    outline-offset: 6px;
    color: var(--heading-text-color);        /* Fallback teks */
}

.pill-info__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.info-block {
    flex: 1;
    text-align: center;
}

.info-block h5 {
    font-family: var(--font-utama, 'Josefin Sans', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading-text-color);
    margin: 0 0 6px 0;
    letter-spacing: 0.05em;
}

.info-block p {
    font-size: 0.72rem;
    color: var(--heading-text-color);
    line-height: 1.55;
    margin: 0;
}

.info-divider {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-style: italic;
    color: var(--heading-text-color);
    opacity: 0.7; /* Sedikit diredupkan agar tetap berfungsi menjadi pemisah estetik */
    padding-top: 2px;
    flex-shrink: 0;
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 400px) {
    .pill-person { height: 200px; width: 100%; }
    .pill-person__name h4 { font-size: 1.3rem; }
    .pill-info { border-radius: 50px; padding: 22px 20px; }
    .info-block h5 { font-size: 0.85rem; }
    .info-block p { font-size: 0.65rem; }
}