:root {
   --bg: #0e0f10;
   --bg-elev: #16181a;
   --text: #e9d9c2;
   --orange: #d7740d;
   --red: #b4220d;
   --border: #2a2d31;
   --accent: #d7740d;
   --card-radius: 12px;
   --shadow: 0 4px 18px rgba(0,0,0,.25);
   --font: Georgia, "Times New Roman", Times, serif;
}

.item-hero { 
   position: relative; z-index: 0; 
}

.item-hero img { 
   display: block; 
   max-width: 100%; 
   height: auto; 
}

.page-content { 
   padding: 10px; 
}

* { 
   box-sizing: border-box; 
}

html, body { 
   height: 100%; 
}

html { 
   background: var(--bg); 
}

body {
    margin: 0px;
    color: var(--text);
    font: 14px/1.45 var(--font);
    font-size: clamp(0.8rem, 2vw, 1rem);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { 
   color: var(--accent); 
   text-decoration: none; 
}

a:hover { 
   text-decoration: underline; 
}

.logo { 
   max-height: 40px; 
   height: auto; 
   width: auto; 
   margin: auto;
   margin-bottom: 5px;
}

.breadcrumb { 
   font-size: 12px; 
   font-weight: 600; 
   margin: 10px 0px; 
   color: var(--orange); 
}

.breadcrumb a { 
   text-decoration: none; 
   color: var(--orange); 
}

.breadcrumb a:hover { 
   text-decoration: underline; 
}

.breadcrumb span { 
   margin-right: 5px; 
   color: rgb(153, 153, 153); 
   font-size: 16px; 
}

h1, h2 { 
   margin: 0px 0px 0.5em; 
   line-height: 1.15; 
}

h1 { 
   font-size: 28px; 
}

h2 { 
   font-size: 22px; 
}

p {
    margin: 0px;
    color: var(--text);
    margin-top: auto;
}

img { 
   max-width: 100%; 
   height: auto; 
   display: block; 
}

.container { 
   width: min(1200px, 92vw); 
   margin: 0px auto; 
}

.museum-subline {
    font-size: clamp(0.8rem, 2vw, 1rem);
    /* line-height: 2; */
    /* color: rgb(170, 170, 170); */
    max-width: 1000px;
}

.museum-subline a { 
   color: rgb(247, 140, 43); 
   text-decoration: underline; 
}

/* Only the "Read more →" link inside .museum-subline */
.museum-subline a {
   color: var(--orange);     /* custom color */
   font-weight: bold;        /* thicker text */
   font-size: 0.8rem;        /* slightly larger */
   text-decoration: none;    /* remove underline if needed */
}

.museum-subline a:hover {
   text-decoration: underline;    /* effect on hover */
/*   color: var(--red);       */      /* accent color when hovered */
}

#grid { 
   display: grid; 
   grid-template-columns: 
   repeat(auto-fill, minmax(240px, 1fr)); 
   gap: 16px; 
   margin-bottom: 20px;
}

.card { 
   display: flex; 
   flex-direction: column; 
   height: 300px; 
   text-align: left; 
   border-radius: var(--card-radius); 
   overflow: hidden; 
   background: var(--bg-elev); 
   border: 1px solid var(--border); 
   box-shadow: var(--shadow); 
   transition: transform 0.15s, box-shadow 0.15s; 
}

.card-body { 
   display: flex; 
   flex-direction: column; 
   flex: 1 1 auto; 
   padding: 10px 12px; 
}

.card-footer { 
   margin-top: auto; 
   font-size: 0.7rem; 
   font-weight: 800; 
   color: var(--orange); 
   opacity: 0.85; 
   display: flex; 
   gap: 0.35rem; 
   align-items: baseline; 
}

.title { 
   margin: 0px 0px 8px; 
}

.card:hover {
   transform: translateY(-3px); 
   box-shadow: rgba(0, 0, 0, 0.32) 0px 6px 22px; 
}

.card .thumb { 
   aspect-ratio: 4 / 3; 
   overflow: hidden; 
   background: rgb(11, 12, 13); 
}

.card .thumb img { 
   width: 100%; 
   height: 100%; 
   object-fit: cover; 
   display: block; 
}

.card .meta { 
   display: flex; 
   flex-direction: column; 
   gap: 6px; 
   padding: 12px; 
   align-items: flex-start; 
}

.card .title { 
   color: var(--text); 
   font-weight: 600; 
   line-height: 1.2; 
   overflow: hidden; 
   display: -webkit-box; 
   -webkit-line-clamp: 2; 
   -webkit-box-orient: vertical; 
   text-overflow: ellipsis; 
   width: 100%; 
}

/* #hero { 
   min-height: 420px; 
}.   */

.hero { 
   position: relative; 
   z-index: 0; 
   background: rgb(11, 11, 11); 
   border: 1px solid rgb(38, 38, 38); 
   border-radius: 12px; 
   overflow: hidden; 
   max-width: 2000px; 
   margin: 0px auto; 
}

.hero img { 
   display: block; 
   width: 100%; 
   height: auto; 
   object-fit: contain; 
   border-radius: 10px; 
   background: rgb(11, 12, 13); 
   border: 1px solid var(--border); 
}

.thumbs { 
   display: flex; 
   flex-wrap: wrap; 
   gap: 8px; 
   justify-content: center; 
   max-width: 1500px; 
   margin: 12px auto 0px; 
}

.thumbs .thumb-btn { 
   padding: 0px; 
   border: 0px; 
   background: none; 
   cursor: pointer; 
}

.thumbs img { 
   max-height: 110px; 
   width: auto; 
   display: block; 
   border: 1px solid var(--border); 
   border-radius: 6px; 
   background: rgb(11, 12, 13); 
}

.meta-item { 
   max-width: 1500px; 
   margin: 20px auto 40px; 
   line-height: 1.5; 
}

.meta-item h2 { 
   margin: 0px 0px 6px; 
}

.meta-item .sub { 
   font-size: 0.7rem; 
   font-weight: 800; 
   color: var(--orange); 
   opacity: 0.85; 
   margin-bottom: 10px; 
}

.page { 
   padding: 16px 0px 28px; 
}

nav a { 
   color: var(--text); 
   opacity: 0.9; 
}

nav a:hover { 
   color: var(--accent); 
   text-decoration: none; 
}

a.card, a.card:link, a.card:visited, a.card:hover, a.card:active { 
   text-decoration: none; 
   color: inherit !important; 
}

#grid .card { 
   display: flex; 
   flex-direction: column; 
}

.museum-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   margin: 0px 0px 12px;
}

.museum-header h1 { 
   margin: 0px; 
   font-size: 1.4rem; 
   font-weight: 600; 
   text-align: left; 
}

.site-header { 
   position: sticky; 
   top: 0px; 
   z-index: 10000; 
   background: rgba(0, 0, 0, 0.92); 
   border-bottom-width: 1px; 
   border-bottom-style: solid; 
   border-bottom-color: rgb(38, 38, 38); 
}

.container { 
   width: min(1500px, 100% - 48px); 
   margin: 0px auto; 
}

.site-header { 
   display: flex; 
   flex-direction: column;
   align-items: center; 
   padding: 20px 0px; 
}

.site-header .logo { 
   max-height: 120px; 
   height: auto; 
   width: auto; 
   margin-bottom: 12px; 
}

.site-header .main-nav { 
   text-align: center; 
   margin-top: 8px; 
   margin-bottom: 5px;
}

.site-header .main-nav a { 
   color: var(--orange); 
   text-decoration: none; 
   font-size: 18px; 
   font-weight: 700; 
   margin: 0px 7px; 
}

.site-header .main-nav a:hover { 
   color: var(--red); 
}

.site-footer { 
   text-align: center; 
   background: rgb(17, 17, 17); 
   color: rgb(170, 170, 170); 
   font-size: 12px; 
   padding: 20px; 
   margin-top: 40px; 
   border-top-width: 1px; 
   border-top-style: solid; 
   border-top-color: rgb(51, 51, 51); 
}

.site-footer .foot-links { 
   margin-top: 8px; 
   margin-bottom: 5px;
}

.site-footer .foot-links a { 
   color: var(--orange); 
   text-decoration: none; 
   font-size: 15px; 
   font-weight: 700; 
   margin: 0px 5px; 
}

.site-footer .foot-links a:hover { 
   color: var(--red); 
}

.site-footer .logo { 
   max-height: 40px; 
   height: auto; 
   width: auto; 
   margin: auto;
   margin-bottom: 5px;
}

.site-header, .site-footer { 
   padding-left: 30px; 
   padding-right: 30px; 
}

/* unified selects */
:root {
   --ctl-bg: #1b1b1b;
/* --ctl-fg: #eeeeee; */
   --ctl-bd: #333333;
   --ctl-radius: 4px;
}

/* layout */
.museum-header .search-categories {
   display: flex;
   gap: .5rem;
   align-items: center;
   margin-left: auto;
   margin-top: auto;
/* line-height: 2;    */
}

/* unified search field */
.museum-header .search-categories input[type="search"] {
   -webkit-appearance: none;
   appearance: none;
   box-sizing: border-box;
   height: 18px;
   padding: 0 12px;
   background-color: var(--ctl-bg);
   color: var(--ctl-fg);
   border: 1px solid var(--ctl-bd);
   border-radius: var(--ctl-radius);
   font: 10px Georgia, "Times New Roman", Times, serif;
}

/* visible × on dark */
.museum-header .search-categories input[type="search"]::-webkit-search-cancel-button { 
   filter: invert(1); 
}

/* unified selects (custom arrow) */
.museum-header .search-categories select {
   -webkit-appearance: none;
   appearance: none;
   box-sizing: border-box;
   height: 18px;
   line-height: 1.25;
    /* padding: 0px 34px 0px 12px; */       /* room for arrow */
   background-color: var(--ctl-bg);
   color: var(--text);
   border: 1px solid var(--ctl-bd);
   border-radius: var(--ctl-radius);
   font: 10px Georgia, "Times New Roman", Times, serif;
   background-image: url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e9d9c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 12px;
}

input[type="text"]::placeholder,
input[type="search"]::placeholder {
   color: var(--text);                   /* placeholder text color */
   opacity: 0.5;
}


/* hover/focus */
.search-categories input[type="search"]:hover,
.museum-header .search-categories select:hover { 
   border-color:#3a3a3a; 
}

.museum-header .search-categories input[type="search"]:focus,
.museum-header .search-categories select:focus {
   outline: none;
   border-color: #e69036;
   box-shadow: 0 0 0 3px rgba(230,144,54,.25);
}

.search-categories {
   display: flex;
   gap: 8px;              /* small default gap between elements */
}

.search-categories #q {
    /* margin-right: 10px; */    /* extra spacing between search field and categories */
}

/* Dropdowns */
select {
   appearance: none;
   background-color: #333;
   color: var(--text);
   border: 1px solid #444;
   border-radius: 1px;
   padding: 1px 10px 1px 10px;
   font-size: 10px;
   cursor: pointer;
   margin-top: auto;
}

/* Custom arrow for select */
select {
   background-image: url("data:image/svg+xml;utf8,<svg fill='%23e9d9c2' height='16' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M4 6l4 4 4-4z'/></svg>");
   background-repeat: no-repeat;
   background-position: right 8px center;
   background-size: 12px;
}

/* Spacing only for text pages (About, etc.) */
.page-content h1,
.page-content h2,
.page-content h3 {
   margin-top: 1em;        /* space before heading */
   margin-bottom: 0.6em;   /* space after heading */
   line-height: 1.2;
}

.page-content p {
   margin: 0 0 2em;        /* space after paragraph */
}

/* Museum header: keep compact spacing */
.museum-header h1 {
   margin: 0 0 .45rem;     /* small gap under the title */
   line-height: 1.15;
}

.museum-header .museum-subline {
   margin-top: .5rem;      /* gap between title and subline */
   margin-bottom: 0;       /* don't push filters down */
}

/* --- For Sale page --- */
.for-sale-page .lead {
   margin-top: .5rem;
   margin-bottom: 1.5rem;
   font-size: clamp(0.8rem, 2vw, 1rem);
   line-height: 1.6;
   opacity: .95;
}

.forsale-list {
   display: grid;
   gap: 2rem;
}

/* Lot card */
.item {
   border: 1px solid rgba(255,255,255,.08);
   border-radius: 10px;
   padding: 1rem;
   background: rgba(0,0,0,.25);       /* under the dark theme; adjust it to your palette */
   margin-bottom: 30px;
}

.item-header {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: .75rem;
}

.item-title {
   font-size: 1.25rem;
   line-height: 1.2;
   margin: 0;
}

.badges { 
   display: flex; gap: .5rem; 
}

.badge {
   font-size: .8rem;
   border: 1px solid rgba(255,255,255,.18);
   padding: .15rem .5rem;
   border-radius: 999px;
   opacity: .9;
}

.badge-available { 
   border-color: rgba(0,255,150,.25); 
}

/* Gallery previews */
.gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: .5rem;
   margin: .5rem 0 1rem;
}

.gallery img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 6px;
   cursor: zoom-in;
   transition: transform .15s ease, opacity .15s ease;
}

.gallery img:hover {
   transform: translateY(-1px);
   opacity: .98;
}

/* Lot content */
.item-body p { 
   margin: 0 0 .75rem; 
}

.item-specs {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.item-specs li { 
   margin: .15rem 0; 
}

.cta { 
   display: flex; gap: .5rem; 
}

button, .btn { 
   appearance: none; 
   background: var(--bg-elev); 
   color: var(--text); 
   border: 1px solid var(--border); 
   border-radius: 10px; 
   padding: 10px 14px; 
   cursor: pointer; 
}

button:hover, .btn:hover { 
   text-decoration: none;
   filter: grayscale(100%) brightness(0.8); transform: translateY(-1px);
}

.btn {
   display: inline-block;
   padding: .5rem .9rem;
   border-radius: 6px;
   border: 1px solid rgba(255,255,255,.18);
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 14px;
   line-height: 1;
   opacity: 0.5;
   margin-bottom: 20px;
}

.btn-secondary { 
   opacity: .9; 
}

/* Adaptive */ /*
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .item-header { flex-direction: column; }
  .gallery { grid-template-columns: 1fr; }
} */

/* --- Lightbox --- */
.lightbox {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,.9);
   display: none;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   z-index: 1000;
}

.lightbox.open { 
   display: flex; 
}

.lb-stage {
   max-width: min(92vw, 1200px);
   max-height: 80vh;
   display: grid;
   gap: .5rem;
   justify-items: center;
}

#lbImage {
   max-width: 100%;
   max-height: 80vh;
   border-radius: 8px;
   outline: none;
}

.lb-caption{
   margin-top:.5rem;
   font-size:.95rem;
   opacity:.9;
   text-align:center;
}

/* --- Lightbox controls: prev / next / close --- */
.lb-prev, .lb-next, .lb-close {
   position: absolute;
   display: grid;
   place-items: center;
   width: 52px;
   height: 52px;
   border: none;
   border-radius: 50%;
   color: #fff;
   background: rgba(0,0,0,.35);
   cursor: pointer;
   user-select: none;
   z-index: 1010;
   transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

/* Arrows */
.lb-prev, .lb-next {
   top: 50%;
   transform: translateY(-50%);
   font-size: 1rem;
   font-weight: 700;
}

.lb-prev {
   left: clamp(0.5rem, 5vw, 3rem);
   left: calc(clamp(0.5rem, 5vw, 3rem) + env(safe-area-inset-left));
}

.lb-next {
   right: clamp(0.5rem, 5vw, 3rem);
   right: calc(clamp(0.5rem, 5vw, 3rem) + env(safe-area-inset-right));
}

/* Cross */
.lb-close {
   top: max(0.75rem, env(safe-area-inset-top));
   right: max(0.75rem, env(safe-area-inset-right));
   font-size: 1.4rem;
   line-height: 1;
}

/* hover / active Effects */
.lb-prev:hover, .lb-next:hover, .lb-close:hover {
   background: rgba(0,0,0,.55);
   transform: scale(1.05) translateY(-50%);
}

.lb-close:hover { 
   transform: scale(1.05); 
}

.lb-prev:active, .lb-next:active, .lb-close:active {
   transform: scale(0.95) translateY(-50%);
}

.lb-close:active { 
   transform: scale(0.95); 
}

/* On the desktop, the arrows hide without aiming */
@media (hover:hover) and (pointer:fine) {
  .lightbox:not(:hover) .lb-prev,
  .lightbox:not(:hover) .lb-next {
    opacity: 0;
    pointer-events: none;
  }
}

/* Lightbox must sit above sticky header */
.lg-backdrop, .lg-outer,           /* LightGallery / Lightbox2 */
.sl-overlay, .sl-wrapper,          /* SimpleLightbox */
.pswp,                             /* PhotoSwipe */
.glightbox-container, .goverlay,   /* GLightbox */
.lightbox, .lightbox-backdrop {    /* custom classes, just in case */
   position: fixed;
   inset: 0;
   z-index: 20000 !important;      /* higher than .site-header (10000) */
}

/* === SINGLE style of plugs: the same as in For Sale === */
.no-items,
.placeholder {
   text-align: center;
   padding: 3rem 1rem;
   margin: 2rem 0;
   background: rgba(0,0,0,.25);
   border: 1px dashed rgba(255,255,255,.15);
   border-radius: 10px;
   opacity: .9;
}

/* Layout For Workshop-die: text and logo in the center, in a column */
.about-page .placeholder {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.5rem;
}

/* Text and logo size (you can adjust the numbers) */
.placeholder p {
   font-size: clamp(0.8rem, 2vw, 1rem);
   line-height: 1.6;
   margin: 0;
}
.placeholder img {
   width: clamp(500px, 22vw, 180px);
   height: auto;
}

/* In case of hard overrides somewhere higher (we remove conflicting styles) */
.placeholder {
   outline: none;
   overflow: visible;
/*     If the radii/bordaries were forcibly removed somewhere - comment:
   border-radius: 10px !important;
   border: 1px dashed rgba(255,255,255,.15) !important;
   background: rgba(0,0,0,.25) !important;
*/
}

/* Plug Workshop */
.placeholder {
   text-align: center;
   padding: 3rem 1rem;
   opacity: .9;
}

/* Text */
.placeholder-text {
   font-size: 1.2rem;        /* More text size */
   line-height: 1.6;
   margin-bottom: 1.5rem;
}

/* Picture */
.placeholder-image {
   width: 180px;             /* Fixed width */
   max-width: 100%;          /* Doesn't break adaptability */
   height: auto;             /* Retains proportions */
   opacity: .95;
}

.no-items {
   text-align: center;       /* Centers text and inline elements */
   padding: 3rem 1rem;
   margin: 2rem 0;
   border: 1px dashed rgba(255,255,255,.15);
   border-radius: 10px;
   background: rgba(0,0,0,.25);
}

.no-items img {
   display: block;           /* For margin to work */
   margin: 1.5rem auto 0;    /* Horizontal autocentering */
   width: 500px;             /* Fixed width (adjust) */
   height: auto;             /* сProtects the proportions */
   opacity: .95;             /* Muffle it a little, if necessary */
}

/* Contact */
.contact-page .lead {
   margin-top: .5rem;
   margin-bottom: 1.25rem;
   opacity: .95;
   text-align: center;
   font-size: clamp(0.8rem, 2vw, 1rem);
}

.contact-form {
   display: grid;
   gap: 1rem;
   max-width: 720px;
   margin: auto;
}

.contact-form .row {
   display: grid;
   gap: 1rem;
   grid-template-columns: 1fr 1fr;
}

/* @media (max-width: 680px){
.contact-form .row { grid-template-columns: 1fr; }
} */

.contact-form label {
   display: grid;
   gap: .4rem;
   font-size: .95rem;
}

/* Common base styles for all fields */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
/* font: 16px/1.45 inherit;              The same size and line-height */
   color: var(--text);                  /* Main text color */
   caret-color: var(--text);
   background: rgba(0,0,0,.25);
   border: 0.3px solid var(--ctl-bd);
   border-radius: 6px;                  /* As in the screenshot */
   padding: .5rem 1rem;                 /* Identical indentation */
   width: 100%;
}

/* === Forms === */
input, textarea {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 12px;
  color: #e9d9c2;
  background: #111;
  border: 1px solid #444;
  padding: 8px 10px;
  border-radius: 4px;
}

/* Placeholder color */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
   color: var(--text);
   opacity: 0.3;                         /* Fixes for Firefox */
}

/* Message field */
.contact-form textarea {
   min-height: 180px;                    /* Comfortable height */
   resize: vertical;                     /* You can change the height, but without the artifact from below */
}

/* Remove the "resizer corner" in Safari/WebKit */
.contact-form textarea::-webkit-resizer { 
   display: none; 
}

/* Hover/focus */
.contact-form input:focus,
.contact-form textarea:focus {
   outline: none;
   border-color: rgba(255,255,255,.35);
   box-shadow: 0 0 0 3px rgba(255,255,255,.07);
}

/* Auto-fill iOS/Safari (yellow background) - lead to our style */
.contact-form input:-webkit-autofill,
.contact-form textarea:-webkit-autofill {
   -webkit-text-fill-color: var(--text, #ddd) !important;
   transition: background-color 9999s ease-in-out 0s;                /* Hide overflow */
   box-shadow: 0 0 0 1000px rgba(0,0,0,.25) inset !important;
   -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,.25) inset !important;
}

.form-actions {
   display: flex;
   align-items: center;
   gap: .75rem;
}

.form-status {
   font-size: .9rem;
   opacity: .9;
}

.form-status.ok  { 
   color: #9be19b; 
}

.form-status.err { 
   color: #ff9aa2; 
}

/* =====   VIDEO: GRID.  ===== */

/* Grid of tiles: identical squares, center by row */
.item-videos{
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px); /* Change 300 if you want */
  gap: 14px;
  justify-content: center;
  margin: 16px auto 0;
  width: max-content;     /* Width on the content, beautifully centered */
  max-width: 100%;
}

/* Square card */
.item-videos .yt-embed{
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 10px rgba(0,0,0,.28);
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.item-videos .yt-embed:hover{
  border-color: rgba(255,165,0,.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 14px rgba(0,0,0,.36);
}

/* The player itself (general) */
.item-videos .yt-embed > iframe,
.item-videos .yt-embed > video{
  display: block;
  background: #000;
  border: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Orientation - without trimming and without "clapsing" at the start */
.item-videos .yt-embed.is-landscape > iframe,
.item-videos .yt-embed.is-landscape > video{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* чFields only from above/bottom */
  border-radius: 0;       /* Screen without rounding */
}

.item-videos .yt-embed.is-portrait > iframe,
.item-videos .yt-embed.is-portrait > video{
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 16;   /* Black fields on the sides */
  border-radius: inherit; /* Repeats the card frame */
}

.item-videos .yt-embed.is-square > iframe,
.item-videos .yt-embed.is-square > video{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: inherit;
}

  /* BLOCK WITH FILTERS: in width, without horizontal scroll */
  .museum-header{ flex-wrap: wrap; gap: 12px 16px; }
  .museum-header .museum-subline{ flex: 1 1 100%; }
  .museum-header .search-categories{
    /* flex: 1 1 100%; */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
  }
  .museum-header .search-categories input[type="search"],
  .museum-header .search-categories select{
    /* flex: 1 1 0; */   /* Divide the line equally */
    min-width: 0;        /* Allow to squeeze */
    max-width: 100%;
  }
  
  /* Social networks in the footer */
.site-footer .social-links {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.site-footer .social-links a {
  display: inline-block;
  width: 28px;
  height: 28px;
}

.site-footer .social-links img {
  width: 100%;
  height: 100%;
/*  filter: brightness(0) invert(1);  White icons */
  transition: filter 0.3s ease;
}

/* .site-footer .social-links a:hover img {  */
/*  filter: brightness(0) saturate(100%) invert(69%) sepia(79%) saturate(4695%) hue-rotate(348deg) brightness(92%) contrast(95%);  */
/*   Backlight in vintage orange-cream  }   */

.site-footer .social-links a:hover img {
  filter: grayscale(100%) brightness(0.7); transform: translateY(-1px);
}

/* ===================== MOBILE ≤600px ===================== */
@media (max-width: 600px) {
  :root{
    --thumb: 150px;
    --thumb-gap: 3px;
  }

  /* Thumbs: Exactly 2 in a row */
  .thumbs{
    display: grid;
    grid-template-columns: repeat(2, var(--thumb));
    gap: var(--thumb-gap);
    justify-content: center;
    width: calc(var(--thumb)*2 + var(--thumb-gap));
    margin: 12px auto 0;
    max-width: 100%;
  }
  .thumbs .thumb-btn{ width: var(--thumb); }
  .thumbs img{ width: 100%; height: auto; border-radius: 6px; }

  /* HERO: Width = two previews + gap, without "eating" frames */
  .hero,
  #hero{
    width: auto;
    max-width: calc(var(--thumb)*2 + var(--thumb-gap));
    margin: 0 auto;
    border: 0;
  }
  .hero img,
  #hero img{
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 10px;
    background: rgb(11,12,13);
    box-sizing: border-box;
  }
  
  .item {
    padding: 0.6rem;
  }
  
  /* Video: a square the size of two miniatures */
  .item-videos{
    display: grid;
    grid-template-columns: calc(var(--thumb)*2 + var(--thumb-gap));
    gap: 14px;
    justify-content: center;
    width: calc(var(--thumb)*2 + var(--thumb-gap));
    margin: 16px auto 0;
    max-width: 100%;
  }
  .item-videos .yt-embed{ width: 100%; aspect-ratio: 1 / 1; }
  .item-videos .yt-embed.is-landscape > iframe{ width:100%; height:auto; border-radius:0; }
  .item-videos .yt-embed.is-portrait  > iframe{ width:auto;  height:100%; border-radius:inherit; }
  .item-videos .yt-embed.is-square    > iframe{ width:100%; height:100%; border-radius:inherit; }

  /* Social icons: break into 2 rows */
  .site-footer .social-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Very narrow screens - reduce the module */
@media (max-width: 380px) {
  :root { --thumb: 140px; }
}