/* Full‑screen static background */
      body {
        margin: 0;
        padding: 0;
        background: url("./images/brum_back.png") no-repeat center center fixed;
        background-size: cover;
        font-family: Arial, sans-serif;
        height: 100vh;
        overflow: hidden; /* prevents body scrolling */
      }
      
      /* Fixed header */
    
      .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between; /* replaces table spacing */
        color: #fff;
        
        z-index: 1000;
      }
      .header-title {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3rem;
        font-weight: bold;
        color: #FFAD60;
        padding: 20px;
        white-space: nowrap;
      }
      .time-style {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        color: white;
        padding: 20px;
        justify-content: flex-end;
        white-space: nowrap;
      }

      /* Scrollable content area */
      .content {
        position: absolute;
        top: 60px; /* same height as header */
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        padding: 20px;
        z-index: 1;;
        /* backdrop-filter: blur(2px); /* optional */
      }

/* Body */
      .main-content {
        margin-top: 80px;   /* adjust to match your header height */
      }

      .container1 {
        display: flex;
        /* background-color: DodgerBlue; */
        justify-content: space-around;
        padding-bottom: 50px;
      }
      
      .container1 .IconColumn {
        background-color: rgba(25, 25, 25, .2);
        margin: 10px;
        padding: 20px;
        font-size: 24px;
        flex-basis: 100px;
      }

      .container1 .BBC_News {
        background-color: rgba(25, 25, 25, .2);
        margin: 0px;
        padding-left: 0px;
        padding-right: 0px;
        display: flex;
        flex-basis: 2100px;
        flex-direction: column;
        align-items: flex-start;
      }
      
      .BBC_News .BBC_top{
        background-color: #B80000;
        width: 100%;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
      }

      .BBC_News .BBC-cell {
        vertical-align: top;
        width: 100%;
        padding-top: 10;
        text-align: center;
      }

      /* Wrapper maintains the 580x320 aspect ratio */
      .bbc-iframe-wrapper {
        position: relative;
        width: 100%;
        padding-top: calc(480 / 1024 * 100%);   /* 55.17% aspect ratio */
      }

      /* Iframe fills the wrapper */
      .bbc-iframe-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
      }

    .icon-appearLeft {
      width: 60px;                 /* final size */
      animation: slideSpinInLeft 0.9s ease-out forwards;
      transform-origin: center;
      opacity: 0;
    }

    @keyframes slideSpinInLeft {
      0% {
        transform: translateX(-80px) scale(0.1) rotate(-360deg);
        opacity: 0;
      }
      60% {
        opacity: 1;
      }
      100% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
      }
    }

    .icon-appearRight {
      width: 60px;                 /* final size */
      animation: slideSpinInRight 0.9s ease-out forwards;
      transform-origin: center;
      opacity: 0;
    }

    @keyframes slideSpinInRight {
      0% {
        transform: translateX(80px) scale(0.1) rotate(360deg);
        opacity: 0;
      }
      60% {
        opacity: 1;
      }
      100% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
      }
    }






        /* Train Departure , Weather, Calculator */
        .grid-container {
          display: grid;
          grid-template-columns: 40% 25% 25%;
          justify-self: center;
          width: 90%;
          column-gap: 5%;
          row-gap: 20px;          
        }

        .grid-item1{
          position: relative;
          grid-column: 1;
          align: center;
          animation: slidein linear;
          animation-timeline: view();
          animation-range: entry 0% cover 40%;
          padding-top: calc(320 / 540 * 100%);  /* h x w */
        }

        .grid-item2 {
          grid-column: 2 / span 2;
          position: relative;
          padding-top: calc(320 / 580 * 100%);  /* h x w */
          align: center;
        }
        .grid-item2-iframe-wrapper iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none;
          animation: fadein linear;
          animation-timeline: view();
          animation-range: entry 0% cover 40%;
        }
        .grid-item3{
        }
        .grid-item4{
         }
        .grid-item5{
        text-align: center;
        font-size: large;
        color: #fff;
      }
        @keyframes fadein
        {from {opacity: 0;scale: 0.5;}to{opacity: 1;scale: 1;}}

        @keyframes slidein
        {from {opacity: 0;left: -500px;}to{opacity: 1;left: 0;}}

        /* When wrapping happens, cell1 becomes full width */ 

        @media (max-width: 1020px) {
          .grid-container {
            grid-template-columns: 50% 50%;
            width: 98%;;
          }
          .grid-item1 {
            grid-column: 1 / span 2;
          }
          .grid-item2 {
            grid-column: 1 / span 2;
          }
          .grid-item2 {
            grid-column: 1 / 2;
          }
          .grid-item2 {
            grid-column: 2 / 3;
          }
          .grid-item2 {
            grid-column: 1 / span 2;
          }
        }



        /*   Sky News Rotator */
:root {
  --sky-scale: 1; /* 🔧 change this to scale everything */
}

        #skynews-box {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none;
          animation: fadein linear;
          animation-timeline: view();
          animation-range: entry 0% cover 40%;
        

          /* width:calc(var(--sky-scale) * 540px);
            height:calc(var(--sky-scale) * 320px);  */
            border-radius:8px;
            overflow:hidden;
        }

        .skynews-icon {
            height:calc(var(--sky-scale) * 1em);
            margin-left:calc(var(--sky-scale) * 10px);
            margin-right: calc(var(--sky-scale) * 10px);
            padding: calc(var(--sky-scale) * 5px);
        }

        .story-headline {
            padding:10px;
            font-size: calc(var(--sky-scale) * 2em);
            font-weight:bold;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            background:white;
            color:black;
            display:flex;
            justify-content:space-between;
            align-items:center;
        }
        .story-headline a{
            color: black;
            text-decoration: none; /* no underline */
        }

        .story {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            opacity:0;
            transition:opacity 1s ease-in-out;
            display:flex;
            flex-direction:column;
        }

        .story.active {
            opacity:1;
        }

        .story-body {
            flex:1;
            display:flex;
            flex-direction:row;
            overflow:hidden;;
        }

        .story-image-container {
            width:50%;
            height:100%;
            position:relative;
            padding-right: calc(var(--sky-scale) * 5px);
        }

        .story-image {
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
        }

        .story-image-caption {
            position:absolute;
            bottom:0;
            left:0;
            right:0;
            padding:calc(var(--sky-scale) * 17px);
            margin-right: calc(var(--sky-scale) * 5px);
            background:rgba(0,0,0,0.5);
            font-size:calc(var(--sky-scale) * 1.2em);
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight:bold;
            color:#fff;
            text-shadow:0 0 4px rgba(0,0,0,0.8);
            line-height:calc(var(--sky-scale) * 1.1);
        }

        .story-description {
            width:60%;
            padding:calc(var(--sky-scale) * 15px);
            background-color: rgba(52, 62, 70, 0.8);
            color:#ddd;
            align-content: center;
            overflow-y:auto;
            font-size:calc(var(--sky-scale) * 1.75em); 
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            line-height:1.2;
        }
        .story-description a{
            color: #ddd;
            text-decoration: none; /* no underline */
        }

        /*--  END Sky News Rotator */





              /* Table 3 */
.container3 {
  display: grid;                 /* force grid */
  grid-template-columns: 30% 70% ;/* enforce 30/70 split */
  gap: 20px;
  width: 90%;
  margin-top: 20px;
  align-items: start;
  justify-self: center;
}

/* ================================
   LEFT COLUMN — LINK TILE GRID
   ================================ */
.links-column {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  background-color: rgba(25, 25, 25, 0.3);
  padding: 15px;
  border-radius: 10px;
}

/* Square tiles */
.link-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
}

.link-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.link-tile a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Overlay text */
.overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 8px;
  background: rgba(0,0,0,0.4);
  color: white;
  text-align: center;
  font-size: 1rem;
  border-radius: 0 0 10px 10px;
}

/* ================================
   RIGHT COLUMN — HRS IFRAME
   ================================ */
.hrs-column {
  width: 100%;
  padding: 10px;
}

.HRS-iframe-wrapper {
  position: relative;
  width: 100%;
  padding-top: calc(320 / 580 * 100%);
}

.HRS-iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ================================
   RESPONSIVE — ONE COLUMN BELOW 1020px
   ================================ */
@media (max-width: 1020px) {
  .container3 {
    grid-template-columns: 100% ;
  }

  .links-column,
  .hrs-column {
    width: 100%;
  }
}