/* ==========================================================
   ODERA DEVLABS HOTEL — NEWS & BLOG
   Uses the existing site's navbar/footer and visual language.
   ========================================================== */

.news-page {
  --news-paper:#f6f3ec;
  --news-soft:#ece8df;
  --news-ink:#161512;
  --news-muted:#777168;
  --news-line:rgba(20,19,16,.13);
  background:var(--news-paper);
  color:var(--news-ink);
  overflow-x:hidden;
}

.news-hero {
  position:relative;
  min-height:760px;
  height:min(880px,100vh);
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:center;
  isolation:isolate;
}
.news-hero-image,.news-hero-overlay { position:absolute;inset:0; }
.news-hero-image {
  background:url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=2500&q=92') center/cover;
  transform:scale(1.08);
  animation:newsHeroZoom 18s ease-in-out 1s infinite alternate;
}
.news-hero-overlay {
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.28) 75%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 50%,rgba(0,0,0,.62));
}
@keyframes newsHeroZoom { to { transform:scale(1.15) translate3d(-1%,.7%,0); } }

.news-hero-content {
  position:relative;
  z-index:2;
  width:min(1280px,86vw);
  margin:60px auto 0;
}
.news-eyebrow,.section-kicker {
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:9px;
}
.news-eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  color:rgba(255,255,255,.62);
  margin-bottom:34px;
}
.news-eyebrow:before { content:"";width:45px;height:1px;background:var(--gold); }
.news-hero h1 {
  margin:0 0 36px;
  font:500 clamp(74px,9.4vw,145px)/.77 var(--serif);
  letter-spacing:-.065em;
}
.news-hero h1 em {
  color:var(--gold-bright);
  font-style:italic;
  font-weight:400;
}
.news-hero-intro {
  max-width:500px;
  color:rgba(255,255,255,.64);
  font-size:14px;
  line-height:1.9;
}
.news-scroll {
  position:absolute;
  left:0;
  margin-top:45px;
  display:flex;
  align-items:center;
  gap:16px;
  color:rgba(255,255,255,.6);
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:8px;
}
.news-scroll span {
  width:42px;height:42px;border:1px solid rgba(255,255,255,.32);
  border-radius:50%;display:grid;place-items:center;
  font-size:16px;
  transition:.4s;
}
.news-scroll:hover span { background:var(--gold);color:#111;border-color:var(--gold);transform:translateY(5px); }
.news-hero-number {
  position:absolute;
  right:34px;
  bottom:36px;
  z-index:2;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:rgba(255,255,255,.42);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:8px;
}

.news-container {
  width:min(1280px,86vw);
  margin:0 auto;
}

.news-categories {
  background:#11110f;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.category-inner {
  min-height:76px;
  display:flex;
  align-items:center;
  gap:9px;
  overflow:auto;
  scrollbar-width:none;
}
.category-inner::-webkit-scrollbar { display:none; }
.category-label {
  margin-right:20px;
  color:rgba(255,255,255,.35);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:7px;
  white-space:nowrap;
}
.category-filter {
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  color:rgba(255,255,255,.58);
  padding:10px 15px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:7px;
  white-space:nowrap;
  cursor:pointer;
  transition:.35s;
}
.category-filter:hover,.category-filter.active {
  background:var(--gold);
  color:#111;
  border-color:var(--gold);
}

.featured-news { background:var(--news-paper); }
.news-section-heading,.blog-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-top:1px solid var(--news-line);
  padding-top:18px;
  margin-bottom:65px;
}
.news-section-heading h2,.blog-heading h2 {
  margin-top:24px;
  font:500 clamp(62px,7vw,100px)/.8 var(--serif);
  letter-spacing:-.06em;
}
.news-section-heading h2 em,.blog-heading h2 em {
  color:var(--gold);
  font-style:italic;
}
.news-section-heading > p {
  max-width:310px;
  margin-bottom:6px;
  color:var(--news-muted);
  font-size:12px;
  line-height:1.8;
}
.section-kicker { color:#9a7926; }

.featured-post {
  display:grid;
  grid-template-columns:1.08fr .78fr;
  gap:10%;
  align-items:center;
}
.featured-post-image {
  height:650px;
  position:relative;
  overflow:hidden;
  display:block;
  background:#222;
}
.post-img {
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  transition:transform 1.15s cubic-bezier(.22,1,.36,1);
}
.post-img-featured {
  background-image:url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2100&q=92');
}
.featured-post-image:after,.blog-image:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 45%,rgba(0,0,0,.48));
}
.featured-post-image:hover .post-img,.blog-image:hover .post-img { transform:scale(1.055); }
.post-category {
  position:absolute;
  top:22px;left:22px;z-index:2;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:8px;
}
.post-arrow {
  position:absolute;
  right:22px;bottom:19px;z-index:2;
  color:var(--gold-bright);
  font-size:20px;
}
.featured-post-content .post-meta,.post-meta {
  display:flex;
  align-items:center;
  gap:11px;
  color:#948c82;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:7px;
}
.post-meta i { width:25px;height:1px;background:#b8b0a4; }
.featured-post-content h3 {
  margin:25px 0 30px;
  font:500 clamp(62px,6.5vw,94px)/.8 var(--serif);
  letter-spacing:-.06em;
}
.featured-post-content h3 em { color:var(--gold);font-style:italic; }
.featured-post-content p {
  max-width:460px;
  color:var(--news-muted);
  font-size:12px;
  line-height:1.9;
  margin-bottom:18px;
}
.featured-post-content .post-lead {
  color:#39352f;
  font:400 25px/1.25 var(--serif);
}
.read-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:25px;
  color:#34312c;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:8px;
  border-bottom:1px solid rgba(20,20,18,.2);
  padding-bottom:8px;
}
.read-link span { color:var(--gold);font-size:17px;transition:.35s; }
.read-link:hover span { transform:translateX(6px); }

.blog-section {
  background:#eeeae1;
  padding:130px 0 150px;
}
.blog-heading { margin-bottom:60px; }
.blog-count {
  color:#9b948a;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:7px;
}
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:70px 27px;
}
.blog-card { min-width:0;transition:opacity .35s,transform .35s; }
.blog-card.is-hidden { display:none; }
.blog-image {
  display:block;
  position:relative;
  height:390px;
  overflow:hidden;
  background:#ddd;
}
.blog-image .post-img-1 { background-image:url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1500&q=90'); }
.blog-image .post-img-2 { background-image:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1500&q=90'); }
.blog-image .post-img-3 { background-image:url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1500&q=90'); }
.blog-image .post-img-4 { background-image:url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=1500&q=90'); }
.blog-image .post-img-5 { background-image:url('https://images.unsplash.com/photo-1530789253388-582c481c54b0?auto=format&fit=crop&w=1500&q=90'); }
.blog-image .post-img-6 { background-image:url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1500&q=90'); }
.blog-image > span,.blog-image > b {
  position:absolute;
  z-index:2;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:8px;
}
.blog-image > span { top:20px;left:20px; }
.blog-image > b { right:20px;bottom:18px;color:var(--gold-bright);font-size:19px;font-weight:400; }
.blog-card .post-meta { margin-top:17px; }
.blog-card h3 {
  margin:18px 0 12px;
  font:500 31px/1.02 var(--serif);
  letter-spacing:-.035em;
}
.blog-card h3 a { color:#22201d;transition:.3s; }
.blog-card h3 a:hover { color:#96751e; }
.blog-card > p {
  color:#777168;
  font-size:11px;
  line-height:1.8;
  max-width:360px;
}
.empty-state {
  display:none;
  text-align:center;
  padding:70px 0 20px;
  color:#8b847b;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:8px;
}

.news-editorial {
  position:relative;
  min-height:690px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.news-editorial-image,.news-editorial-overlay { position:absolute;inset:0; }
.news-editorial-image {
  background:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2500&q=92') center/cover;
  transform:scale(1.08);
  transition:transform 1.8s cubic-bezier(.22,1,.36,1);
}
.news-editorial:hover .news-editorial-image { transform:scale(1); }
.news-editorial-overlay { background:rgba(0,0,0,.6); }
.news-editorial-content { position:relative;z-index:2;padding:70px 25px; }
.news-editorial-content h2 {
  margin:28px 0;
  font:500 clamp(65px,7.5vw,110px)/.78 var(--serif);
  letter-spacing:-.06em;
}
.news-editorial-content h2 em { color:var(--gold-bright);font-style:italic; }
.news-editorial-content p {
  max-width:470px;
  margin:auto;
  color:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.9;
}
.gold { color:var(--gold-bright); }

.news-newsletter {
  background:#e7e3da;
  padding:130px 0 145px;
}
.newsletter-grid {
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:15%;
  align-items:end;
}
.newsletter-grid h2 {
  margin-top:25px;
  font:500 clamp(66px,7.8vw,112px)/.78 var(--serif);
  letter-spacing:-.06em;
}
.newsletter-grid h2 em { color:var(--gold);font-style:italic; }
.newsletter-grid p {
  max-width:430px;
  color:#777168;
  font-size:12px;
  line-height:1.9;
  margin-bottom:32px;
}
.news-form {
  display:flex;
  border-bottom:1px solid rgba(20,19,16,.3);
  padding-bottom:9px;
}
.news-form input {
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#222;
  font:400 19px var(--serif);
}
.news-form input::placeholder { color:#9a9388; }
.news-form button {
  border:0;
  background:none;
  color:#80631c;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:8px;
  white-space:nowrap;
}
.news-form button span { font-size:16px;margin-left:10px; }
.newsletter-grid small {
  display:block;
  margin-top:12px;
  color:#9a9388;
  font-size:7px;
}

.news-page .site-footer { background:#10100e; }

.news-page .news-reveal {
  opacity:0;
  transform:translateY(35px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);
}
.news-page .news-reveal.visible { opacity:1;transform:none; }

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
@media(max-width:1000px) {
  .featured-post { grid-template-columns:1fr;gap:55px; }
  .featured-post-image { height:580px; }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .newsletter-grid { grid-template-columns:1fr;gap:55px; }
}
@media(max-width:700px) {
  .news-hero { min-height:720px; }
  .news-hero-content { width:calc(100% - 48px);margin-top:30px; }
  .news-hero h1 { font-size:62px; }
  .news-hero-intro { font-size:12px; }
  .news-hero-number { display:none; }
  .news-scroll { margin-top:35px; }
  .category-inner { width:calc(100% - 48px); }
  .featured-news,.blog-section,.news-newsletter { padding:90px 0; }
  .news-section-heading,.blog-heading { display:block;margin-bottom:45px; }
  .news-section-heading > p { margin-top:22px; }
  .featured-post-image { height:470px; }
  .featured-post-content h3 { font-size:60px; }
  .featured-post-content .post-lead { font-size:21px; }
  .blog-grid { grid-template-columns:1fr;gap:58px; }
  .blog-image { height:410px; }
  .news-editorial { min-height:620px; }
  .news-editorial-content h2 { font-size:60px; }
  .newsletter-grid h2 { font-size:61px; }
}