/* Dynamic homepage image layout — v2.1.0 */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.dynamic-upper-section{padding:18px 0 28px;background:linear-gradient(180deg,#fff 0%,#f8faff 100%);border-bottom:1px solid var(--border);overflow:hidden}
.dynamic-upper-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--upper-gap,18px);align-items:stretch}
.dynamic-media-slot{height:var(--upper-height-desktop,520px);border-radius:var(--upper-radius,24px);overflow:hidden;background:#f1f5fa;border:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative;isolation:isolate}
.dynamic-media-slot a,.dynamic-display-card a{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.dynamic-media-slot img{display:block;width:100%;height:100%;object-fit:var(--upper-fit,cover);object-position:center;background:#fff}
.dynamic-media-slot.has-image:after,.dynamic-display-card.has-image:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.dynamic-media-slot:hover,.dynamic-display-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(24,87,216,.28)}
.dynamic-media-slot,.dynamic-display-card{transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.dynamic-media-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px;color:var(--text-secondary);background:linear-gradient(145deg,#fff,#eef3fb);position:relative}
.dynamic-media-placeholder:before{content:"";position:absolute;inset:16px;border:1px dashed #c8d3e5;border-radius:calc(var(--upper-radius,24px) - 7px)}
.dynamic-media-placeholder>*{position:relative;z-index:1}
.dynamic-media-placeholder .ui-icon{color:var(--brand-blue);width:42px;height:42px}
.dynamic-media-placeholder strong{font-size:17px;color:var(--brand-navy)}
.dynamic-media-placeholder span{font-size:12px;max-width:280px;line-height:1.7}
.dynamic-display-section{background:var(--bg-soft);padding-top:58px;padding-bottom:68px}
.dynamic-display-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--display-gap,18px)}
.dynamic-display-card{position:relative;aspect-ratio:var(--display-ratio,16/10);overflow:hidden;border-radius:var(--display-radius,20px);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.dynamic-display-card img{display:block;width:100%;height:100%;object-fit:var(--display-fit,cover);object-position:center;background:#fff}
.dynamic-display-card .dynamic-media-placeholder:before{border-radius:calc(var(--display-radius,20px) - 6px)}
.dynamic-media-placeholder.compact{padding:18px;gap:7px}
.dynamic-media-placeholder.compact .ui-icon{width:34px;height:34px}
.dynamic-media-placeholder.compact strong{font-size:14px}
.dynamic-media-placeholder.compact span{font-size:10px}
.interface-settings-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.interface-settings-nav a{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--brand-navy);font-weight:800;text-decoration:none;box-shadow:var(--shadow-xs);transition:var(--transition)}
.interface-settings-nav a:hover,.interface-settings-nav a:focus-visible{border-color:var(--brand-blue);background:var(--brand-blue-soft);transform:translateY(-2px)}
.interface-settings-nav .ui-icon{color:var(--brand-maroon)}
.settings-section{scroll-margin-top:95px}
.settings-section+.settings-section{margin-top:18px}
.image-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.image-settings-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.image-setting-card{border:1px solid var(--border);border-radius:17px;background:#fbfcff;padding:15px;display:grid;gap:12px}
.image-setting-preview{height:190px;border-radius:14px;overflow:hidden;background:#edf2f8;border:1px dashed #c7d1df;display:grid;place-items:center;color:var(--text-secondary)}
.image-setting-preview img{width:100%;height:100%;object-fit:cover}
.image-setting-preview .ui-icon{width:38px;height:38px;color:var(--brand-blue)}
.image-setting-card .remove-option{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--danger);font-weight:800}
.settings-help{padding:12px 14px;border-radius:13px;background:var(--brand-blue-soft);color:var(--brand-blue-dark);font-size:12px;line-height:1.7;border:1px solid #cfddfa}
@media(max-width:1100px){.dynamic-display-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.interface-settings-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.dynamic-upper-section{padding:10px 0 20px}.dynamic-upper-grid{grid-template-columns:1fr}.dynamic-media-slot{height:var(--upper-height-mobile,250px);border-radius:min(var(--upper-radius,24px),20px)}.dynamic-display-section{padding-top:44px;padding-bottom:50px}.dynamic-display-grid{grid-template-columns:1fr}.dynamic-display-card{max-width:620px;width:100%;margin-inline:auto}.image-settings-grid,.image-settings-grid.four{grid-template-columns:1fr}.interface-settings-nav{grid-template-columns:1fr 1fr}.image-setting-preview{height:165px}}
@media(max-width:420px){.interface-settings-nav{grid-template-columns:1fr}.dynamic-media-placeholder span{font-size:10px}.dynamic-display-card{border-radius:min(var(--display-radius,20px),16px)}}
@media(prefers-reduced-motion:reduce){.dynamic-media-slot,.dynamic-display-card,.interface-settings-nav a{transition:none!important}.dynamic-media-slot:hover,.dynamic-display-card:hover,.interface-settings-nav a:hover{transform:none!important}}