/* AfricanBeaches.com - Immersive Visual Journey Theme */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0a0a0a;
  --charcoal:#1a1a1a;
  --dark-grey:#2d2d2d;
  --grey:#6b6b6b;
  --light-grey:#e5e5e5;
  --off-white:#f8f8f8;
  --white:#ffffff;
  --gold:#c9a962;
  --gold-light:#d4bc7c;
  --gold-dark:#a8893f;
  --ocean:#1a4a5e;
  --sand:#f5e6c8;
  --radius:2px;
  --max-w:1200px;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--charcoal);line-height:1.7;background:var(--white);font-weight:300}

/* Header / Nav */
header{background:var(--black);color:var(--white);padding:1.25rem 1.5rem;border-bottom:1px solid var(--dark-grey);position:sticky;top:0;z-index:100}
header .inner{max-width:var(--max-w);margin:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
header .logo{font-family:var(--font-serif);font-size:1.5rem;font-weight:400;letter-spacing:.05em;text-decoration:none;color:var(--white);text-transform:uppercase}
nav{display:flex;gap:2rem}
nav a{color:var(--light-grey);text-decoration:none;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;transition:color .2s}
nav a:hover{color:var(--gold)}

/* Hero */
.hero{background:var(--black);color:var(--white);padding:5rem 1.5rem;text-align:center}
.hero h1{font-family:var(--font-serif);font-size:2.75rem;font-weight:400;margin-bottom:1rem;letter-spacing:.02em}
.hero p{font-size:1.05rem;max-width:700px;margin:auto;color:var(--light-grey);font-weight:300;line-height:1.8}
.hero .btn{margin-top:2rem}

/* Section */
section{max-width:var(--max-w);margin:4rem auto;padding:0 1.5rem}
section h2{font-family:var(--font-serif);font-size:1.75rem;font-weight:400;margin-bottom:2rem;color:var(--black);letter-spacing:.02em;border-bottom:1px solid var(--light-grey);padding-bottom:.75rem}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}
.card{border:1px solid var(--light-grey);background:var(--white);overflow:hidden;transition:all .3s ease}
.card:hover{box-shadow:0 8px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
.card-img{width:100%;height:220px;background:var(--light-grey);display:block;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(20%);transition:filter .3s,transform .6s}
.card:hover .card-img img{filter:grayscale(0%);transform:scale(1.03)}
.card-body{padding:1.5rem}
.card-body h3{font-family:var(--font-serif);font-size:1.25rem;font-weight:400;margin-bottom:.5rem;color:var(--black)}
.card-body p{font-size:.9rem;color:var(--grey);line-height:1.6}
.card-body a{display:inline-block;margin-top:1rem;color:var(--black);font-weight:500;text-decoration:none;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:2px;transition:color .2s}
.card-body a:hover{color:var(--gold)}

/* Beach detail / Country pages */
.beach-detail{max-width:var(--max-w);margin:0 auto;padding:2rem 1.5rem}
.beach-detail h1{font-family:var(--font-serif);font-size:2.5rem;font-weight:400;color:var(--black);margin-bottom:.75rem;letter-spacing:.01em}
.beach-detail h2{font-family:var(--font-serif);font-size:1.35rem;font-weight:400;color:var(--black);margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--light-grey)}
.beach-detail p{margin-bottom:1rem}
.beach-detail ul{margin:1rem 0 1rem 1.5rem}
.beach-detail li{margin-bottom:.5rem}

.meta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;font-size:.8rem;color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
.meta span{background:var(--off-white);padding:.4rem .8rem;border:1px solid var(--light-grey)}

/* Hero image for detail pages */
.hero-image{width:100%;height:60vh;min-height:400px;max-height:700px;object-fit:cover;filter:grayscale(20%);transition:filter .5s}
.hero-image:hover{filter:grayscale(0%)}
.hero-image-container{position:relative;background:var(--black);overflow:hidden}
.hero-image-container::after{content:'';position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.image-credit{position:absolute;bottom:1rem;right:1rem;font-size:.7rem;color:rgba(255,255,255,.7);z-index:1}
.image-credit a{color:rgba(255,255,255,.9);text-decoration:underline}

/* Full-width photo break between sections */
.photo-break{width:100%;position:relative;overflow:hidden;margin:3rem 0}
.photo-break img{width:100%;height:50vh;min-height:300px;max-height:500px;object-fit:cover;display:block;filter:grayscale(15%);transition:filter .5s}
.photo-break:hover img{filter:grayscale(0%)}
.photo-break .photo-caption{position:absolute;bottom:0;left:0;right:0;padding:2rem 2rem 1.5rem;background:linear-gradient(transparent,rgba(0,0,0,.75));color:var(--white)}
.photo-break .photo-caption h3{font-family:var(--font-serif);font-size:1.5rem;font-weight:400;margin-bottom:.25rem}
.photo-break .photo-caption p{font-size:.85rem;color:rgba(255,255,255,.8);margin:0}
.photo-break .photo-caption .credit{font-size:.65rem;color:rgba(255,255,255,.5);margin-top:.5rem}
.photo-break .photo-caption .credit a{color:rgba(255,255,255,.7)}

/* Inline image with caption (within articles) */
.inline-image{margin:2rem 0;position:relative;overflow:hidden}
.inline-image img{width:100%;height:auto;max-height:500px;object-fit:cover;display:block;filter:grayscale(10%);transition:filter .4s}
.inline-image:hover img{filter:grayscale(0%)}
.inline-image figcaption{font-size:.75rem;color:var(--grey);padding:.75rem 0;border-bottom:1px solid var(--light-grey);font-style:italic}
.inline-image figcaption a{color:var(--grey)}

/* Side-by-side image pair */
.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
.image-pair img{width:100%;height:280px;object-fit:cover;filter:grayscale(15%);transition:filter .4s}
.image-pair img:hover{filter:grayscale(0%)}
.image-pair figcaption{font-size:.7rem;color:var(--grey);padding-top:.5rem}

/* Photo gallery - enhanced */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;margin:2rem 0}
.gallery figure{position:relative;overflow:hidden;margin:0}
.gallery img{width:100%;height:240px;object-fit:cover;filter:grayscale(20%);transition:filter .4s,transform .6s;display:block}
.gallery figure:hover img{filter:grayscale(0%);transform:scale(1.03)}
.gallery figcaption{position:absolute;bottom:0;left:0;right:0;padding:.75rem;background:linear-gradient(transparent,rgba(0,0,0,.7));color:var(--white);font-size:.75rem;transform:translateY(100%);transition:transform .3s}
.gallery figure:hover figcaption{transform:translateY(0)}

/* Masonry-style gallery for visual variety */
.gallery-masonry{column-count:3;column-gap:.75rem;margin:2rem 0}
.gallery-masonry figure{break-inside:avoid;margin-bottom:.75rem;position:relative;overflow:hidden}
.gallery-masonry img{width:100%;display:block;filter:grayscale(15%);transition:filter .4s}
.gallery-masonry figure:hover img{filter:grayscale(0%)}
.gallery-masonry figcaption{position:absolute;bottom:0;left:0;right:0;padding:.5rem .75rem;background:linear-gradient(transparent,rgba(0,0,0,.65));color:var(--white);font-size:.7rem;opacity:0;transition:opacity .3s}
.gallery-masonry figure:hover figcaption{opacity:1}

/* Featured image with large caption overlay */
.featured-photo{position:relative;width:100%;margin:3rem 0;overflow:hidden}
.featured-photo img{width:100%;height:70vh;min-height:400px;max-height:600px;object-fit:cover;filter:grayscale(10%);transition:filter .5s}
.featured-photo:hover img{filter:grayscale(0%)}
.featured-photo .overlay{position:absolute;bottom:0;left:0;right:0;padding:3rem;background:linear-gradient(transparent 0%,rgba(0,0,0,.8) 100%);color:var(--white)}
.featured-photo .overlay h2{font-family:var(--font-serif);font-size:2rem;font-weight:400;margin-bottom:.5rem;border:none;padding:0;color:var(--white)}
.featured-photo .overlay p{color:rgba(255,255,255,.85);max-width:600px;margin-bottom:0;font-size:.95rem}
.featured-photo .overlay .credit{font-size:.65rem;color:rgba(255,255,255,.5);margin-top:.75rem}
.featured-photo .overlay .credit a{color:rgba(255,255,255,.65)}

/* Visual journey divider */
.visual-divider{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;margin:3rem 0;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.visual-divider img{width:100%;height:250px;object-fit:cover;filter:grayscale(25%);transition:filter .4s}
.visual-divider img:hover{filter:grayscale(0%)}

/* Panoramic image strip */
.panorama{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;margin-top:3rem;margin-bottom:3rem}
.panorama img{width:100%;height:40vh;min-height:250px;max-height:400px;object-fit:cover;display:block;filter:grayscale(20%);transition:filter .5s}
.panorama:hover img{filter:grayscale(0%)}
.panorama .panorama-credit{position:absolute;bottom:.5rem;right:1rem;font-size:.6rem;color:rgba(255,255,255,.6)}
.panorama .panorama-credit a{color:rgba(255,255,255,.7)}

/* Info grid */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 2rem;margin:1.5rem 0;padding:1.5rem;background:var(--off-white);border:1px solid var(--light-grey)}
.info-grid dt{font-weight:500;font-size:.75rem;color:var(--grey);text-transform:uppercase;letter-spacing:.08em}
.info-grid dd{margin:0 0 1rem;color:var(--charcoal)}

/* Table */
table{width:100%;border-collapse:collapse;margin:1.5rem 0}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--light-grey);font-size:.9rem}
th{background:var(--black);color:var(--white);font-weight:500;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
tr:hover td{background:var(--off-white)}
td a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--gold)}
td a:hover{color:var(--gold)}

/* Footer */
footer{background:var(--black);color:var(--light-grey);text-align:center;padding:3rem 1.5rem;margin-top:4rem;font-size:.85rem}
footer p{margin-bottom:.5rem}
footer a{color:var(--gold);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--gold-light)}

/* Utility */
.breadcrumb{font-size:.8rem;color:var(--grey);margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:.05em}
.breadcrumb a{color:var(--charcoal);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}

.btn{display:inline-block;padding:.9rem 2rem;background:var(--white);color:var(--black);font-weight:500;text-decoration:none;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--white);transition:all .3s}
.btn:hover{background:transparent;color:var(--white)}

.btn-dark{background:var(--black);color:var(--white);border-color:var(--black)}
.btn-dark:hover{background:var(--white);color:var(--black)}

.btn-gold{background:var(--gold);color:var(--black);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-dark);border-color:var(--gold-dark)}

/* Attribution box */
.attribution{font-size:.75rem;color:var(--grey);margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--light-grey)}
.attribution h3{font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;color:var(--charcoal)}
.attribution ul{list-style:none;margin:0;padding:0}
.attribution li{margin-bottom:.35rem}
.attribution a{color:var(--grey);text-decoration:underline}

/* Quote / Pull quote for storytelling */
.pull-quote{border-left:3px solid var(--gold);padding:1.5rem 2rem;margin:2.5rem 0;font-family:var(--font-serif);font-size:1.15rem;color:var(--charcoal);font-style:italic;line-height:1.8;background:var(--off-white)}
.pull-quote cite{display:block;margin-top:.75rem;font-size:.8rem;font-family:var(--font-sans);font-style:normal;color:var(--grey);text-transform:uppercase;letter-spacing:.05em}

/* Stat / highlight boxes */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:2rem 0;text-align:center}
.stat{padding:2rem 1rem;background:var(--off-white);border:1px solid var(--light-grey)}
.stat .number{font-family:var(--font-serif);font-size:2.5rem;color:var(--gold);display:block;margin-bottom:.25rem}
.stat .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}

/* Responsive */
@media(max-width:1024px){
  .gallery-masonry{column-count:2}
  .visual-divider{grid-template-columns:1fr 1fr}
  .visual-divider img:last-child{display:none}
}
@media(max-width:768px){
  .hero h1{font-size:2rem}
  .beach-detail h1{font-size:1.75rem}
  .info-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  nav{gap:1rem;flex-wrap:wrap}
  nav a{font-size:.75rem}
  .image-pair{grid-template-columns:1fr}
  .gallery-masonry{column-count:1}
  .visual-divider{grid-template-columns:1fr}
  .visual-divider img:nth-child(2),.visual-divider img:last-child{display:none}
  .featured-photo .overlay h2{font-size:1.5rem}
  .featured-photo .overlay{padding:1.5rem}
  .photo-break img{min-height:200px}
  .stats-row{grid-template-columns:1fr 1fr}
  .pull-quote{padding:1rem 1.25rem;font-size:1rem}
}
@media(max-width:480px){
  header{padding:1rem}
  nav{gap:.5rem}
  .stats-row{grid-template-columns:1fr}
}