/*
 * Zarautz Webcams — style.css
 *
 * Layout: CSS Grid for the 2-cell video row.
 * Sizing:  aspect-ratio: 16/9 for video cells.
 *          The panorama canvas carries its own intrinsic dimensions (4503×1825)
 *          so width:100%; height:auto is all that is needed to prevent layout shift.
 */

/* ---------------------------------------------------------------------------
   Reset & base
--------------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #26272b;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Video grid  (2 columns, each cell 16:9)
--------------------------------------------------------------------------- */

.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.video-cell {
    position: relative;
    aspect-ratio: 16 / 9;
    background: black;
    overflow: hidden;
}

/* Video.js player, snapshot image, and offline error pictures fill the cell */
.video-cell video-js,
.video-cell picture,
.video-cell img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Undo “video fluid box” behavior for panorama cells */
.video-cell--auto{
  height: auto !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  background: transparent !important; /* optional */
}

.video-cell--auto::before{
  content: none !important;
  display: none !important;
}

/* Ensure the canvas doesn't leave baseline gap */
.video-cell--auto canvas{
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Panorama  (full width; intrinsic canvas dimensions drive the height)
--------------------------------------------------------------------------- */

.panorama {
    display: block;
    width: 100%;
    background: black; /* visible only while canvas is blank */
}

.panorama a {
    display: block;
}

.panorama canvas,
.panorama img {
    display: block;
    width: 100%;
    height: auto;
}

/* Subtle pulse while the stitch is computing */
.panorama--loading {
    animation: panorama-pulse 2s ease-in-out infinite;
}

@keyframes panorama-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ---------------------------------------------------------------------------
   Responsive — portrait mobile: single column
--------------------------------------------------------------------------- */

@media (max-width: 1080px) and (orientation: portrait) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.site-footer {
    background-color: #26272b;
    padding: 45px 0 20px;
    font-size: 15px;
    line-height: 24px;
    color: #737373;
}

.site-footer hr {
    border-top-color: #bbb;
    opacity: 0.5;
    margin: 20px 0;
}

.site-footer h6 {
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 2px;
}

.site-footer a {
    color: #737373;
    text-decoration: none;
}

.site-footer a:hover {
    color: #3366cc;
}

.footer-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    gap: 30px;
}

.footer-about  { flex: 3; }
.footer-sources { flex: 1; }

.footer-sources ul {
    list-style: none;
}

.copyright {
    margin: 0;
}

@media (max-width: 767px) {
    .footer-inner {
        flex-direction: column;
    }

    .site-footer,
    .copyright {
        text-align: center;
        padding-bottom: 0;
    }
}