.creative-section{padding:55px 7%;background:#171914;color:#eee;overflow:hidden}
.creative-section>h2{font:clamp(28px,4vw,48px) Georgia,serif;color:#f6d43d;margin:0 0 32px}
.creative-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
.creative-card{min-width:0;line-height:1.7;overflow-wrap:anywhere}
.creative-card h3{font:inherit;font-size:1.25em;margin:16px 0 10px;color:#f6d43d}
.creative-card p{font:inherit;margin:0;white-space:pre-wrap}
.creative-image{padding:14%;margin:-2% 0 8px;overflow:hidden}
.creative-image img{display:block;width:100%;height:auto;max-height:550px;object-fit:contain;border-radius:6px}
.layout-preview{border:1px solid #777;margin-top:20px}.layout-preview .creative-grid{background-image:linear-gradient(to right,#f6d43d20 1px,transparent 1px);background-size:25% 100%;outline:1px dashed #777}
.layout-preview.is-mobile{max-width:390px}.layout-preview.is-mobile .creative-grid{grid-template-columns:1fr}.layout-preview.is-mobile .creative-card{grid-column:1!important}
.layout-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.layout-controls textarea{min-height:100px}.layout-card-editor{border:1px solid #666;padding:16px;margin:16px 0}.layout-card-editor button{margin:4px}.layout-editor-section{padding:18px;border:1px solid #777;margin:18px 0}.layout-editor-section label{display:block}.layout-editor-section input,.layout-editor-section select,.layout-editor-section textarea{max-width:100%;box-sizing:border-box}.layout-editor-section textarea{width:100%}
@media(max-width:700px){.creative-grid{grid-template-columns:1fr;gap:30px}.creative-card{grid-column:1!important}.creative-section{padding:36px 6%}}

/* Collage: overlap affects pictures, never the description beneath them. */
.creative-card{position:relative}.creative-image{overflow:visible;position:relative;left:calc(-1 * var(--photo-overlap,0px))}
.creative-image[data-format="portrait"] img{aspect-ratio:3/4;object-fit:cover}.creative-image[data-format="landscape"] img{aspect-ratio:4/3;object-fit:cover}.creative-image[data-format="square"] img{aspect-ratio:1;object-fit:cover}
.creative-image[data-frame="postit"] img{background:#f6dc6b;padding:10px 10px 26px;box-sizing:border-box;border-radius:1px;box-shadow:5px 10px 16px #0006}
.creative-image[data-frame="polaroid"] img{background:#f8f5e9;padding:10px 10px 30px;box-sizing:border-box;border-radius:1px;box-shadow:5px 10px 16px #0006}
.layout-preview.is-mobile .creative-image{left:0}.layout-ai-preview{border:1px solid #f6d43d;padding:16px;margin-top:18px}
@media(max-width:700px){.creative-image{left:0}}

.creative-image[data-frame="postit"],.creative-image[data-frame="polaroid"]{padding:4% 4% 12%}

/* Extra frames keep text outside the decorative image area. */
.creative-image[data-frame="postit-pink"],.creative-image[data-frame="postit-blue"]{padding:4% 4% 12%}
.creative-image[data-frame="postit-pink"] img,.creative-image[data-frame="postit-blue"] img{padding:10px 10px 26px;box-sizing:border-box;border-radius:1px;box-shadow:5px 10px 16px #0006}
.creative-image[data-frame="postit-pink"] img{background:#f1a9c4}
.creative-image[data-frame="postit-blue"] img{background:#a8d8ed}
.creative-image[data-frame="tape"]{padding:7%}
.creative-image[data-frame="tape"]:after{content:'';position:absolute;top:3%;left:35%;width:30%;height:25px;background:#eee0b5bb;transform:rotate(-5deg);pointer-events:none}
.creative-image[data-frame="tape"] img{box-shadow:4px 8px 18px #0006}

.creative-card{translate:var(--free-x,0px) var(--free-y,0px)}
@media(max-width:700px){.creative-card{translate:clamp(-40px,var(--free-x,0px),40px) clamp(-40px,var(--free-y,0px),40px)}}
.layout-preview.is-mobile .creative-card{translate:clamp(-40px,var(--free-x,0px),40px) clamp(-40px,var(--free-y,0px),40px)}

.free-collage-canvas{display:block;position:relative;min-height:280px;isolation:isolate}
.free-collage-canvas>.creative-card{position:absolute;translate:none!important;grid-column:auto!important;box-sizing:border-box;margin:0;padding:8px;border:0;border-radius:0;background:transparent}
.free-collage-canvas .creative-image{left:0;padding:4%;margin:0}
.free-collage-canvas .creative-image img{max-height:none}
.collage-edit-toolbar{display:flex;flex-wrap:wrap;gap:4px}.collage-edit-toolbar button{font-size:12px!important;padding:8px!important;min-height:44px}
.layout-preview .free-collage-canvas{overflow:visible}
.creative-copy{min-width:0;max-width:100%;box-sizing:border-box}
.creative-copy:has(p:empty):not(:has(h3)){display:none}
.creative-card[data-text-position="above"]>.creative-copy{margin-bottom:12px}
.creative-card[data-text-position^="overlay-"] .creative-image{display:grid}
.creative-card[data-text-position^="overlay-"] .creative-image>img,.creative-card[data-text-position^="overlay-"] .creative-image>.creative-copy{grid-area:1/1}
.creative-card[data-text-position^="overlay-"] .creative-copy{position:relative;z-index:1;align-self:center;background:#111e;color:#fff;padding:12px;border-radius:6px;overflow-wrap:anywhere}
.creative-card[data-text-position="overlay-top"] .creative-copy{align-self:start}
.creative-card[data-text-position="overlay-bottom"] .creative-copy{align-self:end}
.creative-copy h3:first-child{margin-top:0}