/* Artistic Masonry Gallery - frontend styles. All rules scoped under .amg-gallery so the plugin never leaks into the active theme. */

.amg-gallery * {
    margin: 0; padding: 0; box-sizing: border-box;
}
body.amg-hscroll-active {
    overflow: hidden; height: 100vh;
}
.amg-gallery .header {
    padding: var(--amg-header-padding, 80px 40px 60px); text-align: center;
}
.amg-gallery .header .amg-gallery-title {
    font-size: 3.5rem; font-weight: 300; letter-spacing: 8px; margin-bottom: 15px; color: var(--amg-heading, #1a1a1a); font-style: italic;
}
.amg-gallery .header p {
    font-size: 1rem; color: #888; letter-spacing: 3px; text-transform: uppercase;
}
.amg-gallery .layout-switcher {
    display: flex; justify-content: center; gap: 20px; margin: 50px 0; flex-wrap: wrap; padding: 0 20px;
}
.amg-gallery .layout-btn {
    padding: 15px 30px; background: white; border: 1px solid #ddd; color: #555; font-family: var(--amg-font-family, 'Georgia', serif); font-size: 0.9rem; letter-spacing: 1.5px; cursor: pointer; position: relative; transition: all 0.4s ease;
}
.amg-gallery .layout-btn::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--amg-accent, #d4a574); transition: all 0.4s ease; transform: translateX(-50%);
}
.amg-gallery .layout-btn:hover::after {
    width: 100%;
}
.amg-gallery .layout-btn:hover {
    color: var(--amg-accent, #d4a574); border-color: var(--amg-accent, #d4a574);
}
.amg-gallery .layout-btn.active {
    background: var(--amg-accent, #d4a574); color: white; border-color: var(--amg-accent, #d4a574);
}
.amg-gallery .gallery-container {
    max-width: var(--amg-max-width, 1400px); margin: 0 auto; padding: var(--amg-padding, 40px); position: relative; min-height: var(--amg-min-height, 0);
}
.amg-gallery .hscroll-container {
    position: relative; width: 100%; max-width: var(--amg-max-width, 1400px); margin: 0 auto; padding: var(--amg-padding, 0); box-sizing: border-box; height: auto; overflow: visible; background: transparent; animation: amgFadeIn 0.8s ease;
}
.amg-gallery .hscroll-header {
    position: relative; padding: 0 0 25px; z-index: 1; background: none; display: flex; align-items: center; justify-content: space-between;
}
.amg-gallery .hscroll-header h2 {
    font-size: 1.5rem; font-weight: 300; letter-spacing: 5px; color: var(--amg-heading, #1a1a1a); font-style: italic;
}
.amg-gallery .hscroll-header .scroll-direction {
    display: none;
}
.amg-gallery .scroll-direction .arrow-anim {
    display: inline-block; animation: amgSlideRight 1.5s infinite;
}
.amg-gallery .hscroll-progress {
    display: none;
}
.amg-gallery .hscroll-wrapper {
    column-count: var(--amg-columns, 4); column-gap: var(--amg-gap, 28px); width: 100%; height: auto; padding: 0;
}
.amg-gallery .hscroll-item {
    break-inside: avoid; display: inline-block; width: 100%; height: var(--amg-img-height, auto); margin-bottom: var(--amg-gap, 28px); position: relative; overflow: hidden; border-radius: var(--amg-radius, 18px); box-shadow: 0 15px 50px rgba(0,0,0,0.12); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;
}
.amg-gallery .hscroll-item img {
    width: 100%; height: auto; display: block; object-fit: var(--amg-object-fit, cover); transition: all 0.5s ease;
}
.amg-gallery .hscroll-item:nth-child(3n) {
    border-radius: var(--amg-radius, 6px 40px 6px 40px);
}
.amg-gallery .hscroll-item:nth-child(3n+1) {
    border-radius: var(--amg-radius, 40px 6px 40px 6px);
}
.amg-gallery .hscroll-item:nth-child(3n+2) {
    border-radius: var(--amg-radius, 18px);
}
.amg-gallery .hscroll-info {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 25px 25px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); color: white; z-index: 3; transition: all 0.4s ease;
}
/* Caption position — applies here (H-Scroll) and to Grid below, reusing the
   same Polaroid Caption Position setting so one control governs every layout. */
.amg-gallery.amg-caption-above .hscroll-info,
.amg-gallery.amg-caption-overlay-top .hscroll-info {
    top: 0; bottom: auto; padding: 25px 25px 40px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
}
.amg-gallery.amg-caption-hidden .hscroll-info {
    display: none;
}
.amg-gallery .hscroll-info .info-tag {
    display: inline-block; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--amg-accent-light, #e8c9a0); margin-bottom: 8px; opacity: 0.9;
}
.amg-gallery .hscroll-info .amg-caption-title {
    font-size: var(--amg-caption-size, 1.4rem); font-weight: 400; margin-bottom: 8px; color: var(--amg-caption-color, #ffffff); font-style: var(--amg-caption-style, italic); letter-spacing: 0.5px; line-height: 1.3;
}
.amg-gallery .hscroll-info p {
    font-size: 0.85rem; line-height: 1.5; opacity: 0.85; color: #f0f0f0;
}
.amg-gallery .hscroll-info .info-meta {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.2); font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amg-accent-light, #e8c9a0); display: flex; justify-content: space-between; opacity: 0; max-height: 0; overflow: hidden; transition: all 0.4s ease;
}
.amg-gallery .hscroll-item:hover .hscroll-info .info-meta {
    opacity: 1; max-height: 40px; margin-top: 12px;
}
.amg-gallery .hscroll-item:hover {
    transform: translateY(-10px) scale(1.03); box-shadow: 0 25px 70px rgba(0,0,0,0.25); border-radius: var(--amg-radius, 18px);
}
.amg-gallery .hscroll-item:hover img {
    transform: scale(1.08);
}
.amg-gallery .hscroll-item .item-counter {
    display: none;
}

        @media (max-width: 1100px) {
.amg-gallery .hscroll-wrapper {
    column-count: min(var(--amg-columns, 4), 3);
}
 }

        @media (max-width: 860px) {
.amg-gallery .hscroll-wrapper {
    column-count: min(var(--amg-columns, 4), 2);
}
 }
/* The fullscreen swipe structure is driven by a plain media query (not the
   JS-added .mobile-mode class) so it is 100% reliable even if JS is ever
   delayed or blocked — the phone-vs-desktop layout never depends on
   JavaScript having run. JS still adds/removes .mobile-mode for its own
   interaction-state bookkeeping, but the visuals no longer need it. */
@media (max-width: 768px) {
.amg-gallery .hscroll-container {
    position: fixed; top: max(var(--amg-mobile-offset, 0px), var(--amg-detected-offset, 0px)); left: 0; width: 100vw; max-width: 100vw; margin: 0; padding: 0; box-sizing: border-box; height: calc(100vh - max(var(--amg-mobile-offset, 0px), var(--amg-detected-offset, 0px))); overflow: hidden; z-index: 500; background: var(--amg-bg, #fafaf8);
}
.amg-gallery .hscroll-header {
    position: absolute; top: 0; left: 0; right: 0; padding: 20px 24px; z-index: 10; background: linear-gradient(to bottom, var(--amg-bg, #fafaf8) 70%, transparent); pointer-events: none;
}
.amg-gallery .hscroll-progress {
    display: block; position: absolute; bottom: var(--amg-mobile-progress-bottom, 24px); left: 50%; transform: translateX(-50%); width: var(--amg-mobile-progress-width, 120px); height: 4px; background: rgba(0,0,0,0.15); border-radius: 10px; z-index: 10; overflow: hidden;
}
.amg-gallery .hscroll-wrapper {
    display: flex; gap: var(--amg-mobile-gap, 0px); overflow: visible; padding: 0; height: 100%; width: max-content; align-items: stretch; will-change: transform; scrollbar-width: none;
}
.amg-gallery .hscroll-item {
    width: var(--amg-mobile-item-width, 100vw); height: 100%; flex: 0 0 auto; margin-bottom: 0; border-radius: var(--amg-radius, 0px);
}
.amg-gallery .hscroll-item img {
    height: 100%; width: 100%;
}
.amg-gallery .hscroll-item:nth-child(odd),
.amg-gallery .hscroll-item:nth-child(3n),
.amg-gallery .hscroll-item:nth-child(4n) {
    width: var(--amg-mobile-item-width, 100vw);
}
.amg-gallery .hscroll-info {
    padding: 30px 24px 24px;
}
}
.amg-gallery .polaroid-scatter {
    column-count: var(--amg-columns, 4); column-gap: var(--amg-gap, 30px); animation: amgFadeIn 0.8s ease;
}
.amg-gallery .polaroid-scatter .photo {
    break-inside: avoid; margin-bottom: var(--amg-gap, 35px); background: white; padding: 15px 15px 50px 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; display: inline-block; width: 100%; border-radius: var(--amg-radius, 0px);
}
.amg-gallery .polaroid-scatter .photo::before {
    content: ''; position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(var(--tape-rotation, 0deg)); width: 60px; height: 20px; background: rgba(var(--amg-accent-rgb, 212, 165, 116), 0.3); border-radius: 3px; z-index: 10;
}
.amg-gallery .polaroid-scatter .photo img {
    width: 100%; height: auto; display: block; filter: sepia(0.1) contrast(0.95); transition: filter 0.4s ease;
}
.amg-gallery .polaroid-scatter .photo-caption {
    position: absolute; bottom: 15px; left: 0; right: 0; text-align: center;
    font-family: var(--amg-font-family, 'Courier New', monospace);
    font-size: var(--amg-caption-size, 0.85rem);
    color: var(--amg-caption-color, #666);
    font-style: var(--amg-caption-style, italic);
}
/* Caption position variants (Typography & Captions settings) */
.amg-gallery.amg-caption-hidden .polaroid-scatter .photo-caption {
    display: none;
}
.amg-gallery.amg-caption-overlay-bottom .polaroid-scatter .photo,
.amg-gallery.amg-caption-overlay-top .polaroid-scatter .photo {
    padding: 0; overflow: hidden;
}
.amg-gallery.amg-caption-overlay-bottom .polaroid-scatter .photo-caption,
.amg-gallery.amg-caption-overlay-top .polaroid-scatter .photo-caption {
    left: 0; right: 0; bottom: auto; top: auto; padding: 12px 16px;
    color: var(--amg-caption-color, #fff);
    text-align: center; font-style: var(--amg-caption-style, normal);
}
.amg-gallery.amg-caption-overlay-bottom .polaroid-scatter .photo-caption {
    bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}
.amg-gallery.amg-caption-overlay-top .polaroid-scatter .photo-caption {
    top: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent);
}
/* "Above Image" — classic framed look, just flipped: extra padding moves to the top and the caption sits there instead of at the bottom. */
.amg-gallery.amg-caption-above .polaroid-scatter .photo {
    padding: 50px 15px 15px 15px;
}
.amg-gallery.amg-caption-above .polaroid-scatter .photo-caption {
    top: 15px; bottom: auto;
}
.amg-gallery .polaroid-scatter .photo:nth-child(4n+1) {
    transform: rotate(-3deg); --tape-rotation: -5deg;
}
.amg-gallery .polaroid-scatter .photo:nth-child(4n+2) {
    transform: rotate(2deg); --tape-rotation: 3deg;
}
.amg-gallery .polaroid-scatter .photo:nth-child(4n+3) {
    transform: rotate(-1deg); --tape-rotation: -2deg;
}
.amg-gallery .polaroid-scatter .photo:nth-child(4n) {
    transform: rotate(4deg); --tape-rotation: 5deg;
}
.amg-gallery .polaroid-scatter .photo:hover {
    transform: rotate(0deg) scale(1.05) translateY(-10px); box-shadow: 0 20px 60px rgba(0,0,0,0.25); z-index: 100;
}
.amg-gallery .polaroid-scatter .photo:hover img {
    filter: sepia(0) contrast(1);
}
.amg-gallery .circular-orbit {
    position: relative; width: var(--amg-orbit-size, 800px); height: var(--amg-orbit-size, 800px); margin: 0 auto; animation: amgFadeIn 0.8s ease;
}
.amg-gallery .circular-orbit .orbit-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; background: linear-gradient(135deg, var(--amg-accent, #d4a574), var(--amg-accent-light, #e8c9a0)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; box-shadow: 0 10px 40px rgba(var(--amg-accent-rgb, 212, 165, 116), 0.4);
}
.amg-gallery .circular-orbit .orbit-item {
    position: absolute; width: var(--amg-img-height, 180px); height: var(--amg-img-height, 180px); border-radius: var(--amg-radius, 50%); overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.15); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;
}
.amg-gallery .circular-orbit .orbit-item img {
    width: 100%; height: 100%; object-fit: var(--amg-object-fit, cover); transition: transform 0.5s ease;
}
.amg-gallery .circular-orbit .orbit-item:hover {
    transform: scale(1.3); box-shadow: 0 15px 50px rgba(0,0,0,0.3); z-index: 100;
}
.amg-gallery .circular-orbit .orbit-item:hover img {
    transform: scale(1.2);
}
.amg-gallery .circular-orbit .orbit-item:nth-child(2) {
    top: 0; left: 50%; transform: translateX(-50%);
}
.amg-gallery .circular-orbit .orbit-item:nth-child(3) {
    top: 15%; right: 5%;
}
.amg-gallery .circular-orbit .orbit-item:nth-child(4) {
    top: 50%; right: 0; transform: translateY(-50%);
}
.amg-gallery .circular-orbit .orbit-item:nth-child(5) {
    bottom: 15%; right: 5%;
}
.amg-gallery .circular-orbit .orbit-item:nth-child(6) {
    bottom: 0; left: 50%; transform: translateX(-50%);
}
.amg-gallery .circular-orbit .orbit-item:nth-child(7) {
    bottom: 15%; left: 5%;
}
.amg-gallery .circular-orbit .orbit-item:nth-child(8) {
    top: 50%; left: 0; transform: translateY(-50%);
}
.amg-gallery .circular-orbit .orbit-item:nth-child(9) {
    top: 15%; left: 5%;
}
.amg-gallery .diagonal-cascade {
    display: flex; flex-direction: column; gap: 0; padding-left: 100px; animation: amgFadeIn 0.8s ease;
}
.amg-gallery .diagonal-cascade .cascade-item {
    width: var(--amg-img-width, 350px); height: var(--amg-img-height, 250px); margin-left: 80px; margin-bottom: -50px; position: relative; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;
}
.amg-gallery .diagonal-cascade .cascade-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, transparent 0%, rgba(var(--amg-accent-rgb, 212, 165, 116), 0.2) 100%); z-index: 1; transition: opacity 0.4s ease;
}
.amg-gallery .diagonal-cascade .cascade-item:hover::before {
    opacity: 0;
}
.amg-gallery .diagonal-cascade .cascade-item img {
    width: 100%; height: 100%; object-fit: var(--amg-object-fit, cover); box-shadow: 0 10px 40px rgba(0,0,0,0.15); transition: all 0.5s ease;
}
.amg-gallery .diagonal-cascade .cascade-item:hover {
    transform: translateX(50px) scale(1.1); z-index: 100;
}
.amg-gallery .diagonal-cascade .cascade-item:hover img {
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.amg-gallery .diagonal-cascade .cascade-item .item-number {
    position: absolute; top: 20px; left: 20px; font-size: 3rem; font-weight: 300; color: white; z-index: 2; text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.amg-gallery .morphing-gallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--amg-gap, 40px); animation: amgFadeIn 0.8s ease;
}
.amg-gallery .morphing-gallery .shape-item {
    position: relative; height: var(--amg-img-height, 350px); overflow: hidden; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;
}
.amg-gallery .morphing-gallery .shape-item img {
    width: 100%; height: 100%; object-fit: var(--amg-object-fit, cover); transition: all 0.6s ease;
}
.amg-gallery .morphing-gallery .shape-item:nth-child(1) {
    clip-path: circle(50% at 50% 50%);
}
.amg-gallery .morphing-gallery .shape-item:nth-child(2) {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.amg-gallery .morphing-gallery .shape-item:nth-child(3) {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.amg-gallery .morphing-gallery .shape-item:nth-child(4) {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.amg-gallery .morphing-gallery .shape-item:nth-child(5) {
    clip-path: ellipse(50% 40% at 50% 50%);
}
.amg-gallery .morphing-gallery .shape-item:nth-child(6) {
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}
.amg-gallery .morphing-gallery .shape-item:hover {
    clip-path: circle(100% at 50% 50%); transform: scale(1.1); box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.amg-gallery .morphing-gallery .shape-item:hover img {
    transform: scale(1.2);
}
.amg-gallery .morphing-gallery .shape-item .shape-label {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: white; padding: 10px 25px; font-size: 0.9rem; letter-spacing: 2px; opacity: 0; transition: opacity 0.4s ease; z-index: 10;
}
.amg-gallery .morphing-gallery .shape-item:hover .shape-label {
    opacity: 1;
}
.amg-gallery .floating-layers {
    position: relative; height: 1000px; perspective: 1000px; animation: amgFadeIn 0.8s ease;
}
.amg-gallery .floating-layers .layer {
    position: absolute; width: var(--amg-img-width, 300px); height: var(--amg-img-height, 400px); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; transform-style: preserve-3d;
}
.amg-gallery .floating-layers .layer img {
    width: 100%; height: 100%; object-fit: var(--amg-object-fit, cover); box-shadow: 0 15px 50px rgba(0,0,0,0.2); transition: all 0.6s ease;
}
.amg-gallery .floating-layers .layer::after {
    content: ''; position: absolute; top: 20px; left: 20px; right: -20px; bottom: -20px; background: rgba(var(--amg-accent-rgb, 212, 165, 116), 0.1); z-index: -1; transition: all 0.6s ease;
}
.amg-gallery .floating-layers .layer:nth-child(1) {
    top: 50px; left: 10%; transform: rotateY(-15deg) rotateX(5deg);
}
.amg-gallery .floating-layers .layer:nth-child(2) {
    top: 100px; left: 35%; transform: rotateY(10deg) rotateX(-5deg);
}
.amg-gallery .floating-layers .layer:nth-child(3) {
    top: 50px; right: 10%; transform: rotateY(15deg) rotateX(5deg);
}
.amg-gallery .floating-layers .layer:nth-child(4) {
    top: 500px; left: 15%; transform: rotateY(-10deg) rotateX(-5deg);
}
.amg-gallery .floating-layers .layer:nth-child(5) {
    top: 550px; left: 45%; transform: rotateY(5deg) rotateX(10deg);
}
.amg-gallery .floating-layers .layer:nth-child(6) {
    top: 500px; right: 15%; transform: rotateY(-5deg) rotateX(-10deg);
}
.amg-gallery .floating-layers .layer:hover {
    transform: rotateY(0deg) rotateX(0deg) translateZ(100px) scale(1.1); z-index: 100;
}
.amg-gallery .floating-layers .layer:hover img {
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}
.amg-gallery .floating-layers .layer:hover::after {
    top: 30px; left: 30px; right: -30px; bottom: -30px;
}
.amg-gallery .refined-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--amg-gap, 25px); animation: amgFadeIn 0.8s ease;
}
.amg-gallery .refined-grid .grid-item {
    position: relative; overflow: hidden; background: white; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: 1px solid #e0e0e0; border-radius: var(--amg-radius, 0px);
}
.amg-gallery .refined-grid .grid-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(var(--amg-accent-rgb, 212, 165, 116), 0.1), rgba(232, 201, 160, 0.1)); opacity: 0; transition: opacity 0.4s ease; z-index: 1;
}
.amg-gallery .refined-grid .grid-item:hover::before {
    opacity: 1;
}
.amg-gallery .refined-grid .grid-item:hover {
    transform: translateY(-10px) scale(1.02); border-color: var(--amg-accent, #d4a574); box-shadow: 0 20px 60px rgba(var(--amg-accent-rgb, 212, 165, 116), 0.3);
}
.amg-gallery .refined-grid .grid-item img {
    width: 100%; height: var(--amg-img-height, auto); display: block; transition: transform 0.4s ease; position: relative; z-index: 0; object-fit: var(--amg-object-fit, cover);
}
.amg-gallery .refined-grid .grid-item:hover img {
    transform: scale(1.1); filter: brightness(0.9);
}
.amg-gallery .refined-grid .grid-item .item-info {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 20px; background: linear-gradient(to top, rgba(255,255,255,0.95), transparent); transform: translateY(100%); transition: transform 0.4s ease; z-index: 2;
}
.amg-gallery .refined-grid .grid-item:hover .item-info {
    transform: translateY(0);
}
.amg-gallery.amg-caption-above .refined-grid .grid-item .item-info,
.amg-gallery.amg-caption-overlay-top .refined-grid .grid-item .item-info {
    top: 0; bottom: auto; transform: translateY(-100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.95), transparent);
}
.amg-gallery.amg-caption-above .refined-grid .grid-item:hover .item-info,
.amg-gallery.amg-caption-overlay-top .refined-grid .grid-item:hover .item-info {
    transform: translateY(0);
}
.amg-gallery.amg-caption-hidden .refined-grid .grid-item .item-info {
    display: none;
}
.amg-gallery .refined-grid .grid-item .item-info .amg-caption-title {
    font-size: var(--amg-caption-size, 1.3rem); margin-bottom: 8px; color: var(--amg-caption-color, var(--amg-accent, #d4a574)); text-transform: uppercase; letter-spacing: 1px; font-style: var(--amg-caption-style, normal);
}
.amg-gallery .refined-grid .grid-item .item-info p {
    font-size: 0.85rem; color: #666; line-height: 1.5;
}
.amg-gallery .organic-curves {
    column-count: var(--amg-columns, 4); column-gap: var(--amg-gap, 30px); animation: amgFadeIn 0.8s ease;
}
.amg-gallery .organic-curves .curve-item {
    break-inside: avoid; margin-bottom: var(--amg-gap, 30px); position: relative; border-radius: var(--amg-radius, 50px 10px 50px 10px); overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.1); cursor: pointer;
}
.amg-gallery .organic-curves .curve-item:hover {
    transform: rotate(-2deg) scale(1.05); border-radius: var(--amg-radius, 10px 50px 10px 50px); box-shadow: 0 20px 60px rgba(var(--amg-accent-rgb, 212, 165, 116), 0.3);
}
.amg-gallery .organic-curves .curve-item img {
    width: 100%; height: var(--amg-img-height, auto); display: block; transition: all 0.5s ease; object-fit: var(--amg-object-fit, cover);
}
.amg-gallery .organic-curves .curve-item:hover img {
    filter: sepia(0.3) saturate(1.2);
}
.amg-gallery .organic-curves .curve-item .curve-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease;
}
.amg-gallery .organic-curves .curve-item:hover .curve-overlay {
    opacity: 1;
}
.amg-gallery .organic-curves .curve-item .curve-overlay span {
    font-size: 3rem; color: var(--amg-accent, #d4a574); transform: scale(0); transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.amg-gallery .organic-curves .curve-item:hover .curve-overlay span {
    transform: scale(1);
}
.amg-gallery .perspective-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--amg-gap, 40px); perspective: 1000px; animation: amgFadeIn 0.8s ease;
}
.amg-gallery .perspective-cards .card-item {
    position: relative; height: var(--amg-img-height, 400px); transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;
}
.amg-gallery .perspective-cards .card-item:hover {
    transform: rotateY(180deg);
}
.amg-gallery .perspective-cards .card-front, .amg-gallery .perspective-cards .card-back {
    position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--amg-radius, 20px); overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.amg-gallery .perspective-cards .card-front {
    background: white;
}
.amg-gallery .perspective-cards .card-front img {
    width: 100%; height: 100%; object-fit: var(--amg-object-fit, cover);
}
.amg-gallery .perspective-cards .card-back {
    background: linear-gradient(135deg, var(--amg-bg, #fafaf8), #f5f5f0); transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border: 2px solid var(--amg-accent, #d4a574);
}
.amg-gallery .perspective-cards .card-back .amg-caption-title {
    font-size: var(--amg-caption-size, 1.8rem); margin-bottom: 15px; color: var(--amg-caption-color, var(--amg-accent, #d4a574)); text-align: center; font-style: var(--amg-caption-style, italic);
}
.amg-gallery .perspective-cards .card-back p {
    font-size: 0.95rem; color: #666; text-align: center; line-height: 1.6; margin-bottom: 20px;
}
.amg-gallery .perspective-cards .card-back .view-btn {
    padding: 12px 30px; background: var(--amg-accent, #d4a574); color: white; border: none; border-radius: 25px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; font-family: var(--amg-font-family, 'Georgia', serif);
}
.amg-gallery .perspective-cards .card-back .view-btn:hover {
    transform: scale(1.1); box-shadow: 0 10px 30px rgba(var(--amg-accent-rgb, 212, 165, 116), 0.4);
}
.amg-gallery .lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(250, 250, 248, 0.98); display: none; align-items: center; justify-content: center; z-index: 10000; animation: amgFadeIn 0.3s ease;
}
.amg-gallery .lightbox.active {
    display: flex;
}
.amg-gallery .lightbox-content {
    max-width: 85%; max-height: 85%; position: relative;
}
.amg-gallery .lightbox-content img {
    max-width: 100%; max-height: 85vh; box-shadow: 0 20px 80px rgba(0,0,0,0.2);
}
.amg-gallery .lightbox-close {
    position: absolute; top: -60px; right: 0; font-size: 3rem; color: var(--amg-text, #2c2c2c); cursor: pointer; transition: all 0.3s ease; font-weight: 300;
}
.amg-gallery .lightbox-close:hover {
    color: var(--amg-accent, #d4a574); transform: rotate(90deg);
}

        
        @media (max-width: 1024px) {
.amg-gallery .polaroid-scatter {
    column-count: min(var(--amg-columns, 4), 3);
}
.amg-gallery .organic-curves {
    column-count: min(var(--amg-columns, 4), 3);
}
.amg-gallery .morphing-gallery {
    grid-template-columns: repeat(2, 1fr);
}
.amg-gallery .circular-orbit {
    width: var(--amg-orbit-size, 600px); height: var(--amg-orbit-size, 600px);
}
 }

        @media (max-width: 768px) {
.amg-gallery .header .amg-gallery-title {
    font-size: 2.5rem;
}
.amg-gallery .polaroid-scatter {
    column-count: min(var(--amg-columns, 4), 2);
}
.amg-gallery .organic-curves {
    column-count: min(var(--amg-columns, 4), 2);
}
.amg-gallery .morphing-gallery {
    grid-template-columns: 1fr;
}
.amg-gallery .circular-orbit {
    width: var(--amg-orbit-size, 400px); height: var(--amg-orbit-size, 400px);
}
.amg-gallery .circular-orbit .orbit-item {
    width: var(--amg-img-height, 120px); height: var(--amg-img-height, 120px);
}
.amg-gallery .diagonal-cascade .cascade-item {
    width: var(--amg-img-width, 280px); height: var(--amg-img-height, 200px);
}
.amg-gallery .floating-layers .layer {
    width: var(--amg-img-width, 220px); height: var(--amg-img-height, 300px);
}
.amg-gallery .perspective-cards .card-item {
    height: var(--amg-img-height, 300px);
}
.amg-gallery .hscroll-info .amg-caption-title {
    font-size: var(--amg-caption-size, 1.2rem);
}
.amg-gallery .hscroll-info p {
    font-size: 0.8rem;
}
.amg-gallery .hscroll-info {
    padding: 30px 20px 20px;
}
 }

        @media (max-width: 480px) {
.amg-gallery .polaroid-scatter {
    column-count: 1;
}
.amg-gallery .organic-curves {
    column-count: 1;
}
 }


/* Keyframes (renamed to avoid collisions with theme/other plugin animations) */
@keyframes amgSlideRight { 0% { transform: translateX(-5px); opacity: 0.3; } 50% { transform: translateX(5px); opacity: 1; } 100% { transform: translateX(-5px); opacity: 0.3; } }
@keyframes amgFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============ Plugin wrapper base + admin-configurable variants ============ */
.amg-gallery {
    --amg-accent: #d4a574;
    --amg-accent-light: #e8c9a0;
    --amg-accent-rgb: 212, 165, 116;
    --amg-bg: #fafaf8;
    --amg-text: #2c2c2c;
    --amg-heading: #1a1a1a;
    display: block;
    width: 100%;
    max-width: 100%;
    font-family: var(--amg-font-family, 'Georgia', serif);
    color: var(--amg-text, #2c2c2c);
    overflow-x: hidden;
    position: relative;
    text-align: left;
    line-height: 1.5;
    box-sizing: border-box;
}
.amg-gallery .gallery-container,
.amg-gallery .hscroll-container,
.amg-gallery .layout-switcher {
    width: 100%;
    box-sizing: border-box;
}
.amg-gallery .refined-grid,
.amg-gallery .morphing-gallery,
.amg-gallery .perspective-cards {
    width: 100%;
}
.amg-gallery *, .amg-gallery *::before, .amg-gallery *::after { box-sizing: border-box; }
.amg-gallery img { max-width: none; }
.amg-empty-notice { padding: 30px; text-align: center; background: #f7f7f7; border: 1px dashed #ccc; border-radius: 8px; color: #777; font-family: sans-serif; }

/* Defensive: guarantee full width regardless of the surrounding theme/page-builder
   context (Elementor columns, flex/grid parents, etc. can otherwise shrink an
   unstyled block to its content width instead of stretching it). */
.elementor-widget-amg-gallery,
.elementor-widget-amg-gallery .elementor-widget-container {
    width: 100%;
}
.amg-gallery {
    align-self: stretch;
    flex: 1 1 auto;
}

/* Font style variants */
.amg-gallery.amg-font-sans,
.amg-gallery.amg-font-sans .layout-btn { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.amg-gallery.amg-font-sans .header .amg-gallery-title,
.amg-gallery.amg-font-sans .hscroll-header h2,
.amg-gallery.amg-font-sans .hscroll-info .amg-caption-title,
.amg-gallery.amg-font-sans .card-back .amg-caption-title { font-style: normal; }

.amg-gallery.amg-font-system,
.amg-gallery.amg-font-system .layout-btn { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.amg-gallery.amg-font-system .header .amg-gallery-title,
.amg-gallery.amg-font-system .hscroll-header h2,
.amg-gallery.amg-font-system .hscroll-info .amg-caption-title,
.amg-gallery.amg-font-system .card-back .amg-caption-title { font-style: normal; }

/* Corner style variants */
/* Corner Style presets are resolved to a concrete --amg-radius value in PHP
   (see AMG_Render::resolve_radius()) so there is exactly one mechanism for
   radius, applied identically everywhere — no separate !important rules
   that could cover some layouts but not others. */

/* Elementor editor preview safety: keep panel visible while editing even if JS hasn't run yet */
.elementor-editor-active .amg-gallery [data-layout-panel] { min-height: 40px; }

/* Image shadow toggle. A drop shadow's blur can visually "bleed" between
   stacked items even at 0 gap/margin, which looks like a leftover gap —
   turning this off removes that bleed for truly edge-to-edge layouts. */
.amg-gallery.amg-no-shadow .hscroll-item,
.amg-gallery.amg-no-shadow .hscroll-item:hover,
.amg-gallery.amg-no-shadow .polaroid-scatter .photo,
.amg-gallery.amg-no-shadow .polaroid-scatter .photo:hover,
.amg-gallery.amg-no-shadow .orbit-item,
.amg-gallery.amg-no-shadow .orbit-item:hover,
.amg-gallery.amg-no-shadow .grid-item,
.amg-gallery.amg-no-shadow .grid-item:hover,
.amg-gallery.amg-no-shadow .curve-item,
.amg-gallery.amg-no-shadow .curve-item:hover,
.amg-gallery.amg-no-shadow .card-front,
.amg-gallery.amg-no-shadow .card-back,
.amg-gallery.amg-no-shadow .cascade-item img,
.amg-gallery.amg-no-shadow .cascade-item:hover img,
.amg-gallery.amg-no-shadow .morphing-gallery .shape-item:hover,
.amg-gallery.amg-no-shadow .floating-layers .layer img,
.amg-gallery.amg-no-shadow .floating-layers .layer:hover img,
.amg-gallery.amg-no-shadow .refined-grid .grid-item:hover,
.amg-gallery.amg-no-shadow .perspective-cards .card-item:hover .view-btn {
    box-shadow: none !important;
}