/* Magazine-Style Photo Blog Overrides
   Loaded after main.css — all rules here override the base framework. */

/* ──────────────────────────────────────
   Global
   ────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* Header — serif logo, backdrop blur */
.site-header,
.gh-head {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(15, 15, 15, 0.85);
}

.site-header .site-title,
.gh-head .site-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Blur-up reveal: subtle scale */
.blur-up.lazyloaded {
  transition: filter 0.4s ease, transform 0.4s ease;
  transform: scale(1);
}

.blur-up.lazyload,
.blur-up.lazyloading {
  transform: scale(1.02);
}

/* ──────────────────────────────────────
   Gallery Grid
   ────────────────────────────────────── */

/* Widen container */
.feed-entry-wrap.u-maxWidth1100 {
  max-width: 1280px;
}

.feed-entry-wrap .row > [class*="col"] {
  margin-bottom: 32px;
}

/* Card base */
.story {
  background: #161616;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.story:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Image container — aspect-ratio based, no fixed heights */
.story-image {
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  border: none;
  height: auto;
  position: relative;
}

/* Orientation-aware aspect ratios */
.story-image.orient-landscape {
  aspect-ratio: 3 / 2;
}

.story-image.orient-portrait {
  aspect-ratio: 3 / 4;
}

.story-image.orient-square {
  aspect-ratio: 1 / 1;
}

/* Images fill their container with cover */
.story-image img,
.story-image .story-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image hover */
.story-image img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s ease;
}

.story:hover .story-image img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Image gradient overlay */
.story-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Titles — serif */
.story-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.story-title a {
  transition: color 0.25s ease;
}

.story:hover .story-title a {
  color: #b8d8ba;
}

/* Story body padding */
.story-body {
  padding: 16px 18px 18px;
}

/* ── Featured (ss1) ── */
.ss1 .story {
  background: #0d0d0d;
}

.ss1 .story-image {
  min-height: 420px;
}

/* Featured respects orientation but gives more room */
.ss1 .story-image.orient-landscape {
  aspect-ratio: 16 / 9;
}

.ss1 .story-image.orient-portrait {
  aspect-ratio: 3 / 4;
}

.ss1 .story-image.orient-square {
  aspect-ratio: 1 / 1;
}

.ss1 .story-title {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.15;
}

.ss1 .story-body::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: #7cb380;
  margin-bottom: 14px;
  border-radius: 2px;
}

/* ── Medium (ss2) ── */
.ss2 .story-image {
  height: auto;
}

/* Medium respects orientation */
.ss2 .story-image.orient-landscape {
  aspect-ratio: 16 / 10;
}

.ss2 .story-image.orient-portrait {
  aspect-ratio: 3 / 4;
}

.ss2 .story-image.orient-square {
  aspect-ratio: 1 / 1;
}

.ss2 .story-title {
  font-size: 1.5rem;
  font-weight: 700;
}

/* ──────────────────────────────────────
   Single Photo Page
   ────────────────────────────────────── */

.magazine-single {
  padding-top: 0;
}

/* Photo */
.magazine-photo {
  max-width: 1400px;
  margin: 0 auto;
}

.magazine-photo img,
.magazine-photo video {
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

/* Title below photo */
.magazine-post-header {
  text-align: center;
  padding-top: 32px;
  padding-bottom: 16px;
}

.magazine-post-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 16px;
}

.magazine-post-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #7cb380;
  margin: 20px auto 0;
  border-radius: 2px;
}

/* ── Next Photo Card ── */
.magazine-post-footer {
  max-width: 740px;
  margin: 40px auto;
  padding: 0 20px;
}

.magazine-next-photo {
  background: #161616;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 16px;
}

.magazine-next-photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.magazine-next-photo .prev-next-image-link {
  width: 40%;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.magazine-next-photo .prev-next-image-link img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.magazine-next-photo:hover .prev-next-image-link img {
  transform: scale(1.05);
}

.magazine-next-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7cb380;
}

.magazine-next-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.magazine-next-title a {
  transition: color 0.25s ease;
}

.magazine-next-photo:hover .magazine-next-title a {
  color: #b8d8ba;
}

/* ──────────────────────────────────────
   Mobile (max-width: 767px)
   ────────────────────────────────────── */

@media (max-width: 767px) {

  /* Remove framework border-bottom overrides on cards */
  .story {
    border-bottom: none;
  }

  /* Featured: stack, smaller title */
  .ss1 .story-image {
    min-height: auto;
  }

  .ss1 .story-title {
    font-size: 1.75rem;
  }

  /* Single photo: full-bleed, smaller title */
  .magazine-photo img,
  .magazine-photo video {
    border-radius: 0;
    box-shadow: none;
  }

  .magazine-post-title {
    font-size: 1.75rem;
  }

  /* Next photo: stack vertically */
  .magazine-next-photo .u-flex {
    flex-direction: column;
  }

  .magazine-next-photo .prev-next-image-link {
    width: 100%;
    margin-bottom: 12px;
  }
}