:root{
     --sea-dark:#00556a;
     --sea:#00758c;
     --sea-light:#eef8fa;
     --gold:#d89a2b;
     --text:#173d49;
     --muted:#58727c;
     --border:#d4e5e9;
     --white:#ffffff;
 }

 *{
     box-sizing:border-box;
 }

 html{
     scroll-behavior:smooth;
 }

 body{
     margin:0;
     font-family:Arial, Helvetica, sans-serif;
     color:var(--text);
     background:#fff;
     line-height:1.65;
 }

 /* =========================
    TOP BAR
    ========================= */

 .topbar{
     background:var(--sea-dark);
     color:#fff;
     font-size:14px;
 }

 .topbar-inner{
     max-width:1120px;
     margin:auto;
     padding:8px 0;
     display:flex;
     justify-content:space-between;
     align-items:center;
 }

 /* =========================
    HEADER
    ========================= */

 header{
     background:#fff;
     border-bottom:1px solid #d9e4e7;
 }

 .header-inner{
     max-width:1120px;
     margin:auto;
     min-height:70px;
     display:flex;
     align-items:center;
     justify-content:space-between;
 }

 .logo{
     font-size:26px;
     font-weight:800;
     letter-spacing:-1px;
     color:#00556a;
     text-decoration:none;
 }

 .logo span{
     color:var(--gold);
 }

 nav{
     display:flex;
     gap:26px;
     align-items:center;
 }

 nav a{
     color:#111;
     text-decoration:none;
     font-weight:700;
     font-size:15px;
 }

 nav a:hover{
     color:var(--sea);
 }

 /* =========================
    MAIN
    ========================= */

 main{
     width:100%;
 }

 .container{
     max-width:1120px;
     margin:auto;
 }

 /* =========================
    HERO
    ========================= */

 .hero{
     background:linear-gradient(
         90deg,
         #f2fbfc 0%,
         #ffffff 100%
     );
     padding:46px 0 38px;
 }

 .breadcrumb{
     font-size:14px;
     color:#17647a;
     margin-bottom:28px;
 }

 .breadcrumb a{
     color:#17647a;
     text-decoration:none;
 }

 .hero-grid{
     display:grid;
     grid-template-columns:1.15fr .85fr;
     gap:50px;
     align-items:center;
 }

 .hero h1{
     font-size:64px;
     line-height:1.05;
     letter-spacing:-2px;
     color:var(--sea-dark);
     margin:0 0 18px;
 }

 .hero-intro{
     font-size:20px;
     line-height:1.55;
     color:#315b67;
     max-width:650px;
     margin-bottom:24px;
 }

 .tags{
     display:flex;
     flex-wrap:wrap;
     gap:9px;
 }

 .tag{
     border:1px solid #c6e0e5;
     background:#fff;
     border-radius:30px;
     padding:8px 14px;
     color:var(--sea-dark);
     font-size:14px;
     font-weight:700;
 }

 /* =========================
    HERO PHOTO
    ========================= */

 .hero-photo{
     width:100%;
     aspect-ratio:1 / 1;
     border-radius:18px;
     overflow:hidden;
     background:#dceff2;
     display:flex;
     align-items:center;
     justify-content:center;
 }

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

 .photo-note{
     text-align:center;
     color:var(--sea-dark);
     font-weight:700;
     padding:25px;
 }

 .photo-note strong{
     display:block;
     font-size:16px;
     margin-bottom:3px;
 }

 .photo-note small{
     display:block;
     margin-top:5px;
     font-weight:600;
 }

 /* =========================
    INFORMATION CARDS
    ========================= */

 .info-strip{
     max-width:1120px;
     margin:30px auto 0;
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:14px;
 }

 .info-card{
     border:1px solid var(--border);
     border-radius:14px;
     padding:18px;
     background:#fff;
     box-shadow:0 8px 20px rgba(0,70,85,.04);
 }

 .info-card .label{
     display:block;
     text-transform:uppercase;
     letter-spacing:.7px;
     font-size:13px;
     font-weight:800;
     color:#627982;
     margin-bottom:4px;
 }

 .info-card strong{
     color:var(--sea-dark);
     font-size:16px;
 }

 /* =========================
    CONTENT
    ========================= */

 .content{
     max-width:1120px;
     margin:0 auto;
     padding:38px 0 60px;
 }

 .content-grid{
     display:grid;
     grid-template-columns:1fr 310px;
     gap:40px;
 }

 .content h2{
     color:var(--sea-dark);
     font-size:34px;
     line-height:1.2;
     margin:0 0 18px;
 }

 .content h3{
     color:var(--sea-dark);
     font-size:22px;
     margin:30px 0 8px;
 }

 .content p{
     font-size:17px;
     margin:0 0 17px;
 }

 .content ul{
     padding-left:22px;
 }

 .content li{
     margin-bottom:7px;
 }

 /* =========================
    SIDEBAR
    ========================= */

 .sidebar-card{
     border:1px solid var(--border);
     border-radius:16px;
     padding:22px;
     background:#fff;
     box-shadow:0 8px 24px rgba(0,70,85,.05);
 }

 .sidebar-card h3{
     margin-top:0;
     font-size:20px;
 }

 .quick-list{
     list-style:none;
     padding:0;
     margin:0;
 }

 .quick-list li{
     border-bottom:1px solid #e6eef0;
     padding:10px 0;
 }

 .quick-list li:last-child{
     border-bottom:0;
 }

 .quick-list strong{
     display:block;
     color:#617982;
     text-transform:uppercase;
     font-size:12px;
     letter-spacing:.6px;
 }

 .quick-list span{
     color:var(--sea-dark);
     font-weight:700;
 }

 /* =========================
    NOTICE
    ========================= */

 .notice{
     margin:25px 0;
     background:#f0f8f9;
     border-left:4px solid var(--sea);
     border-radius:8px;
     padding:17px 20px;
 }

 .notice strong{
     color:var(--sea-dark);
 }

 /* =========================
    FEATURE GRID
    ========================= */

 .feature-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:16px;
     margin:25px 0;
 }

 .feature-card{
     border:1px solid var(--border);
     border-radius:14px;
     padding:20px;
     background:#fff;
 }

 .feature-card h3{
     margin:0 0 7px;
     font-size:20px;
 }

 .feature-card p{
     font-size:15px;
     margin:0;
 }

 /* =========================
    PHOTOGRAPHS
    ========================= */

 .gallery{
     margin-top:35px;
 }

 .gallery h2{
     margin-bottom:20px;
 }

 .gallery-placeholder{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:28px;
 }

 .gallery-box{
     border:1px dashed #9bc6cc;
     border-radius:14px;
     overflow:hidden;
     background:#eef7f8;
     text-align:center;
 }

 .gallery-box img{
     width:100%;
     height:auto;
     display:block;
     object-fit:cover;
 }

 .gallery-box.placeholder{
     min-height:260px;
     display:flex;
     align-items:center;
     justify-content:center;
     padding:25px;
     color:var(--sea-dark);
     font-weight:700;
 }

 .gallery-caption{
     background:#eef7f8;
     color:var(--sea-dark);
     font-weight:700;
     padding:8px 10px;
     line-height:1.4;
 }

 /* =========================
    LOCATION
    ========================= */

 .location-box{
     margin-top:30px;
     border:1px solid var(--border);
     border-radius:15px;
     padding:22px;
     background:#f8fcfd;
 }

 .location-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:10px 30px;
 }

 .location-item strong{
     display:block;
     color:#607982;
     text-transform:uppercase;
     font-size:12px;
     letter-spacing:.6px;
 }

 .location-item span{
     color:var(--sea-dark);
     font-weight:700;
 }

 /* =========================
    NEARBY
    ========================= */

 .nearby{
     margin-top:35px;
 }

 .nearby-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:16px;
 }

 .nearby-card{
     border:1px solid var(--border);
     border-radius:14px;
     padding:20px;
 }

 .nearby-card h3{
     margin:0 0 8px;
 }

 .nearby-card h3 a{
     color:var(--sea-dark);
     text-decoration:none;
 }

 .nearby-card p{
     font-size:15px;
 }

 /* =========================
    FOOTER
    ========================= */

 footer{
     background:#004f62;
     color:#fff;
     padding:35px 0;
     margin-top:20px;
 }

 .footer-inner{
     max-width:1120px;
     margin:auto;
     display:grid;
     grid-template-columns:1.3fr 1fr 1fr;
     gap:40px;
 }

 footer h3{
     margin-top:0;
     font-size:18px;
 }

 footer p,
 footer li{
     font-size:14px;
     color:#d9edf1;
 }

 footer ul{
     list-style:none;
     padding:0;
 }

 footer li{
     margin-bottom:6px;
 }

 footer a{
     color:#fff;
     text-decoration:none;
 }

 .copyright{
     max-width:1120px;
     margin:25px auto 0;
     padding-top:20px;
     border-top:1px solid rgba(255,255,255,.2);
     font-size:13px;
     color:#c8e0e5;
 }
.page-image {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 25px auto;
    border-radius: 6px;
}
 /* =========================
    MOBILE
    ========================= */

 /* =========================
    RESPONSIVE LAYOUT
    ========================= */

 @media (max-width:900px){
     .topbar-inner,
     .header-inner,
     .container,
     .content,
     .info-strip,
     .footer-inner,
     .copyright{
         margin-left:22px;
         margin-right:22px;
     }

     nav{
         gap:14px;
         flex-wrap:wrap;
     }

     .hero-grid{
         grid-template-columns:1fr;
     }

     .hero h1{
         font-size:50px;
     }

     .info-strip{
         grid-template-columns:repeat(2,minmax(0,1fr));
     }

     .content-grid{
         grid-template-columns:minmax(0,1fr);
     }
 }

 @media (max-width:700px){
     html, body{
         width:100%;
         max-width:100%;
         overflow-x:hidden;
     }

     .topbar-inner{
         display:flex;
         flex-direction:column;
         align-items:flex-start;
         gap:2px;
         font-size:12px;
         padding:8px 0;
     }

     .header-inner{
         display:flex;
         flex-direction:column;
         align-items:flex-start;
         justify-content:center;
         min-height:0;
         padding:12px 0;
         gap:10px;
     }

     .logo{
         display:block;
         font-size:22px;
         line-height:1.2;
     }

     nav{
         display:flex;
         flex-direction:row;
         flex-wrap:wrap;
         justify-content:flex-start;
         align-items:center;
         width:100%;
         min-width:0;
         gap:8px 18px;
     }

     nav a{
         font-size:14px;
         padding:3px 0;
     }

     .hero{ padding:30px 0; }
     .breadcrumb{ margin-bottom:20px; }
     .hero-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
     .hero h1{ font-size:36px; letter-spacing:-1px; overflow-wrap:anywhere; }
     .hero-intro{ font-size:18px; }
     .hero-photo{ aspect-ratio:1 / 1; }

     .info-strip{
         grid-template-columns:minmax(0,1fr);
         margin-top:20px;
     }

     .content{
         display:block;
         width:auto;
         max-width:none;
         min-width:0;
         margin-left:22px;
         margin-right:22px;
         padding:30px 0 45px;
     }

     .content-grid{
         display:grid;
         grid-template-columns:minmax(0,1fr);
         gap:24px;
         width:100%;
         max-width:100%;
         min-width:0;
     }

     .content-grid > *,
     .content section,
     .content article{
         width:100%;
         max-width:100%;
         min-width:0;
     }

     .content h2{ font-size:27px; line-height:1.25; overflow-wrap:anywhere; }
     .content h3{ font-size:20px; line-height:1.3; overflow-wrap:anywhere; }
     .content p, .content li{ font-size:16px; line-height:1.65; overflow-wrap:anywhere; }

     .content img,
     .content video,
     .content iframe,
     .page-image,
     .breakwater-video{
         display:block;
         width:100%;
         max-width:100%;
         height:auto;
         box-sizing:border-box;
     }

     .breakwater-video{ margin:20px 0; border-radius:8px; }

     .feature-grid,
     .gallery-placeholder,
     .location-grid,
     .nearby-grid,
     .footer-inner{
         grid-template-columns:minmax(0,1fr);
     }

     .gallery-box img{ width:100%; height:auto; object-fit:contain; }
     .gallery-box.placeholder{ min-height:230px; }
 }

 /* =========================================================
    E-MALTA MARINE CONDITIONS
    ========================================================= */

 .marine-conditions {
     width: 100%;
     margin: 0 auto 28px;
     padding: 18px 22px 14px;

     background: #ffffff;
     border: 1px solid #dfe7eb;
     border-radius: 12px;

     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);

     font-family: inherit;
     color: #18323f;

     box-sizing: border-box;
 }

 /* Header */

 .marine-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;

     padding-bottom: 14px;
     margin-bottom: 14px;

     border-bottom: 1px solid #e7edef;
 }

 .marine-eyebrow {
     display: block;

     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1.4px;

     color: #71838c;
     margin-bottom: 3px;
 }

 .marine-header h2 {
     margin: 0;

     font-size: 21px;
     line-height: 1.2;
     font-weight: 700;

     color: #18323f;
 }

 /* Status */

 .marine-status {
     display: flex;
     align-items: center;
     gap: 8px;

     white-space: nowrap;

     font-size: 13px;
     font-weight: 600;
 }

 .marine-status-dot {
     width: 10px;
     height: 10px;

     border-radius: 50%;

     background: #9aa7ad;

     box-shadow: 0 0 0 4px rgba(154, 167, 173, 0.12);
 }

 .marine-status.good .marine-status-dot {
     background: #2e9b62;
     box-shadow: 0 0 0 4px rgba(46, 155, 98, 0.12);
 }

 .marine-status.moderate .marine-status-dot {
     background: #d79b25;
     box-shadow: 0 0 0 4px rgba(215, 155, 37, 0.12);
 }

 .marine-status.rough .marine-status-dot {
     background: #c94b4b;
     box-shadow: 0 0 0 4px rgba(201, 75, 75, 0.12);
 }

 /* Main grid */

 .marine-grid {
     display: grid;

     grid-template-columns:
         repeat(6, minmax(0, 1fr));

     gap: 10px;
 }

 /* Individual information */

 .marine-item {
     display: flex;
     align-items: center;

     gap: 9px;

     min-width: 0;

     padding: 9px 7px;
 }

 .marine-icon {
     flex: 0 0 auto;

     font-size: 20px;
     line-height: 1;
 }

 .marine-item > div {
     min-width: 0;
 }

 .marine-label {
     display: block;

     font-size: 10px;
     line-height: 1.2;

     color: #7a8b93;

     margin-bottom: 3px;

     white-space: nowrap;
 }

 .marine-item strong {
     display: block;

     font-size: 15px;
     line-height: 1.2;

     color: #18323f;

     white-space: nowrap;
 }

 /* Footer */

 .marine-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;

     gap: 15px;

     padding-top: 12px;
     margin-top: 8px;

     border-top: 1px solid #edf1f3;

     font-size: 10px;
     color: #87969d;
 }

 .marine-footer a {
     color: inherit;
     text-decoration: underline;
 }

 .marine-updated {
     white-space: nowrap;
 }

 /* Loading */

 .marine-conditions.marine-loading .marine-item strong {
     color: #a4b0b5;
 }

 /* Error */

 .marine-conditions.marine-error {
     border-color: #eadede;
 }

 .marine-conditions.marine-error .marine-status-dot {
     background: #b85c5c;
 }

 /* Tablet */

 @media (max-width: 900px) {

     .marine-grid {
         grid-template-columns:
             repeat(3, minmax(0, 1fr));
     }

 }

 /* Mobile */

 @media (max-width: 600px) {

     .marine-conditions {
         padding: 16px 15px 12px;
         border-radius: 10px;
     }

     .marine-header {
         align-items: flex-start;
     }

     .marine-header h2 {
         font-size: 18px;
     }

     .marine-status {
         font-size: 11px;
     }

     .marine-grid {
         grid-template-columns:
             repeat(2, minmax(0, 1fr));

         gap: 4px;
     }

     .marine-item {
         padding: 9px 3px;
     }

     .marine-icon {
         font-size: 18px;
     }

     .marine-item strong {
         font-size: 14px;
     }

     .marine-footer {
         flex-direction: column;
         align-items: flex-start;

         gap: 5px;
     }

 }
.breakwater-video {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 25px auto;
    border-radius: 12px;
    background: #000;
}

/* Video remains within its content column at every viewport size. */
.breakwater-video {
    box-sizing: border-box;
    max-width: 100%;
}