/* Postcard — kabdalis2 design system. Vintage vykort: photo front + written back. */
.b-postcard{
    display:grid;
    grid-template-columns:1fr 1fr;
    max-width:860px;
    margin-inline:auto;
    background:var(--surface,#fffdf9);
    border:1px solid var(--line,#e4ded2);
    border-radius:var(--radius,16px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
    transform:rotate(-1.2deg);
    transition:transform 250ms ease;
}
.b-postcard:hover{ transform:rotate(0); }

/* Front — the photo side */
.b-postcard__front{
    position:relative;
    aspect-ratio:4 / 3;
    background:var(--surface2,#f5f1ea);
}
.b-postcard__img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}
.b-postcard__caption{
    position:absolute; left:16px; bottom:12px;
    font-size:1.5rem;
    color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.55);
    transform:rotate(-2deg);
}

/* Back — the written side, split by a center divider */
.b-postcard__back{
    position:relative;
    padding:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    background:var(--surface,#fffdf9);
}
.b-postcard__back::before{
    content:"";
    position:absolute;
    top:20px; bottom:20px; left:50%;
    width:1px;
    background:var(--line,#e4ded2);
}
.b-postcard__msg{
    display:flex; flex-direction:column;
    gap:10px;
    padding-right:6px;
}
.b-postcard__text{
    margin:0;
    font-size:1.25rem; line-height:1.5;
    color:var(--ink,#25211b);
}
.b-postcard__sign{
    font-size:1.35rem;
    color:var(--accent,#9c3a52);
    transform:rotate(-1.5deg);
    align-self:flex-start;
}

/* Address side — stamp, postmark, dotted lines */
.b-postcard__addr{
    position:relative;
    display:flex; flex-direction:column;
    justify-content:flex-end;
    padding-top:78px;
    padding-left:6px;
}
.b-postcard__stamp{
    position:absolute; top:0; right:0;
    width:54px; height:64px;
    border:3px dashed var(--line,#e4ded2);
    border-radius:4px;
    background:var(--surface2,#f5f1ea);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:3px;
}
.b-postcard__stamp-emoji{ font-size:1.3rem; line-height:1; }
.b-postcard__stamp-cap{
    font-family:var(--font-mono,monospace);
    font-size:.45rem; letter-spacing:.04em;
    color:var(--muted,#756b5d);
    white-space:nowrap;
}
.b-postcard__postmark{
    position:absolute; top:22px; right:36px;
    width:64px; height:64px;
    border:1.5px solid var(--ink,#25211b);
    border-radius:50%;
    opacity:.25;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    font-family:var(--font-mono,monospace);
    font-size:.55rem; letter-spacing:.12em;
    color:var(--ink,#25211b);
    transform:rotate(-12deg);
    pointer-events:none;
}
.b-postcard__postmark-star{ font-size:.7rem; }
.b-postcard__lines{
    list-style:none;
    margin:0; padding:0;
}
.b-postcard__lines li{
    padding:12px 0 4px;
    border-bottom:1px dotted var(--line,#e4ded2);
    font-size:.9rem;
    color:var(--ink-soft,#564e42);
}

/* Mobile — stack the photo front over the back */
@media (max-width:760px){
    .b-postcard{ grid-template-columns:1fr; }
}
@media (max-width:480px){
    .b-postcard__back{ grid-template-columns:1fr; }
    .b-postcard__back::before{ display:none; }
    .b-postcard__addr{ padding-left:0; }
}

@media (prefers-reduced-motion: reduce){
    .b-postcard{ transform:none; transition:none; }
}

/* Editor affordances */
.b-postcard--editor .b-postcard__img--empty{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
}
.b-postcard-line-row{ display:flex; align-items:flex-end; gap:4px; }
.b-postcard-line-row > .components-base-control{ flex:1; }