/* Basic styling overrides for WPBakery APAR Exhibitions element
   This mirrors the Tailwind-based layout used in the React app.
   Keep selectors specific to avoid leaking styles. */

/* Exhibitions element - mirror React / Tailwind styles used in app */
#exhibitions { padding-bottom: 4rem; }

/* Grid */
.exh-grid { display: grid; grid-gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .exh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .exh-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card base */
.exh-card { border-radius: 0.75rem; overflow: hidden; background: #fff; border: 1px solid rgba(247,148,29,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.03); transition: border-color .25s ease, transform .18s ease; }
.exh-card:hover { border-color: rgba(247,148,29,0.9); transform: translateY(-4px); }

/* Image */
.exh-media { position: relative; background: #fff; height:12rem; overflow: hidden; }
.exh-img { display:block; width:100%; height:100%; object-fit:cover; background:#fff; }

/* Badge */
.exh-badge { position: absolute; top: 1rem; right: 1rem; background: #f7941d; color: #fff; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.875rem; font-weight:600; }

/* Card content */
.exh-body { padding: 1.5rem; }
.exh-title { font-size: 1.125rem; line-height: 1.2; font-weight: 600; color: #111827; margin-bottom: 0.5rem; }
.exh-meta { margin-bottom: 0.75rem; color:#6b7280; font-size:0.9rem; display:block; gap:0.75rem; flex-wrap:wrap; }
.exh-meta .meta-item { display:flex; align-items:center; gap:0.5rem; }
.exh-desc { color:#4b5563; font-size:0.95rem; margin-bottom:1rem; }

.exh-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.exh-learn { color: #f7941d; font-weight:500; font-size:0.95rem; display:inline-flex; align-items:center; gap:0.35rem; }
.exh-days { color:#6b7280; font-size:0.8rem; }

/* Past exhibition card variant */
.exh-past { background: #f3f4f6; border: 1px solid #e5e7eb; opacity: 0.6; }
.exh-past:hover { opacity: 0.9; }
.exh-past .exh-img { filter: grayscale(100%); }
.exh-past .exh-body { padding: 0.75rem; }

/* Small/tight card used in past section */
.exh-small-card { background:#f3f4f6; border:1px solid #e5e7eb; padding:0.75rem; border-radius:0.5rem; display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem; }
.exh-small-card .exh-img { width:100%; height:120px; object-fit:cover; border-radius:0.375rem; }
.exh-small-card .exh-title { font-size:1rem; color:#374151; text-align:left; margin-top:0.5rem; }

/* Past grid specific tweaks */
.exh-past-grid { grid-gap: 1rem; }
.exh-past-grid .exh-small-card { align-items:center; text-align:center; }

/* Utilities */
.exh-muted { color:#6b7280; font-size:0.875rem; }
.exh-cta { color:#f7941d; font-weight:500; }

/* Accessibility focus */
.exh-card:focus-within { outline: 2px solid rgba(247,148,29,0.18); }

/* Ensure consistent spacing for wrappers produced by WP element */
#exhibitions .exh-grid > * { display:flex; flex-direction:column; }

/* Layout 2 - Exhibitions page styling */
.exh-layout-2 { padding-bottom: 4rem; }
.exh-l2-inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.exh-l2-upcoming {
    /* full-bleed background for upcoming section */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background: #fff7f0;
    padding: 2rem 0; /* vertical padding, inner content is centered below */
    margin-bottom: 4rem;
}
/* @media (min-width: 768px) { .exh-l2-upcoming { padding: 3rem 0; } } */
.exh-l2-upcoming-inner { max-width: 80rem; margin: 0 auto; }
/* Centered rounded panel inside the full-bleed background */
.exh-l2-upcoming-panel { background: #fff7f0; border-radius: 1rem; margin: 0 auto; }
/* @media (min-width: 768px) { .exh-l2-upcoming-panel { padding: 3rem; } } */
.exh-l2-heading { font-size: 2rem; font-weight: 400; color: #f7941c; margin-bottom: 1.75rem; }
.exh-l2-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .exh-l2-grid { grid-template-columns: repeat(3, 1fr); } }
.exh-l2-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.exh-l2-card:hover { transform: translateY(-4px); border-color: #f6951b; box-shadow: 0 18px 40px rgba(15,23,42,0.12); }
.exh-l2-date-ribbon { position: relative; display: inline-flex; align-items: center; padding: 0.8rem 1.5rem; margin: 1.5rem 0 0 1.5rem; background: #f6951b; color: #fff; font-weight: 600; font-size: 1rem; }
.exh-l2-date-ribbon::after { content: ""; position: absolute; right: -26px; top: 0; width: 26px; height: 100%; background: #f6951b; transform: skewX(-18deg); transform-origin: left; }
.exh-l2-date-text { position: relative; z-index: 1; }
.exh-l2-card-body { padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.exh-l2-card-title { font-size: 1.15rem; font-weight: 600; color: #111827; margin: 0; line-height: 1.3; }
.exh-l2-details { display: flex; flex-direction: column; gap: 0.75rem; }
.exh-l2-detail-row { display: grid; grid-template-columns: 110px 1fr; gap: 0.75rem; align-items: start; }
.exh-l2-detail-label { color: #f6951b; font-weight: 600; font-size: 0.95rem; }
.exh-l2-detail-value { color: #111827; font-size: 0.95rem; }
.exh-l2-cta { margin-top: 0.5rem; font-weight: 600; color: #111827; font-size: 1rem; }
.exh-l2-card-media { min-height: 160px; padding: 1.5rem; display: flex; align-items: center; justify-content: center; background: #fff; }
.exh-l2-past-media { height: 12rem; overflow: hidden; }
.exh-l2-card-media img,
.exh-l2-card-placeholder { width: 100%; height: 100%; object-fit: contain; background: #f5f5f5; display: block; }
.exh-l2-past-media img { width: 100%; height: 100%; object-fit: cover; background: #f5f5f5; display: block; }
.exh-l2-card-placeholder { min-height: 120px; }
.exh-l2-card-meta { font-size: 1rem; color: #4b5563; margin: 0; }
.exh-l2-card-desc { font-size: 1rem; color: #374151; margin: 0; }
.exh-l2-empty { font-size: 1rem; color: #6b7280; }

.exh-l2-past { margin-top: 3rem; }
.exh-l2-subheading { font-size: 2rem; font-weight: 400; color: #374151; margin-bottom: 1.5rem; }
.exh-l2-tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.exh-l2-tab { border: none; background: transparent; color: #6b7280; padding: 0.35rem 0; cursor: pointer; font-size: 1rem; font-weight: 500; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; }
.exh-l2-tab:hover { color: #111827; }
.exh-l2-tab.is-active { color: #f7941c; border-color: #f7941c; }
.exh-l2-panels { border-top: 1px solid #e5e7eb; padding-top: 1.5rem; }
.exh-l2-panel { animation: exh-l2-fade .35s ease; }
.exh-l2-panel[hidden] { display: none !important; }

@keyframes exh-l2-fade {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.exh-l2-past-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 768px) { .exh-l2-past-grid { grid-template-columns: repeat(3, 1fr); } }
.exh-l2-past-card { display: flex; flex-direction: column; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.exh-l2-past-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,24,39,0.12); opacity: 0.9; }
.exh-l2-past-media img,
.exh-l2-card-placeholder { width: 100%; height: 12rem; object-fit: cover; background: #fff; display: block; }
.exh-l2-past-media img { filter: grayscale(100%); }
.exh-l2-past-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.exh-l2-past-title { font-size: 1.05rem; font-weight: 500; color: #1f2937; margin: 0; }
.exh-l2-past-meta { font-size: 0.9rem; color: #6b7280; margin: 0; }
.exh-l2-past-desc { font-size: 0.9rem; color: #4b5563; margin: 0; }