/* =========================================================
   GUIDE TEMPLATE – LAYOUT
   ========================================================= */

/* =========================================================
   MEDIA
   ========================================================= */

/* 16:9 på flexbild */
.guide-image img {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: cover;
}


/* =========================================================
   HERO (FULLBLEED)
   ========================================================= */

body.page-template-template-guide .hero-section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;

  min-height: clamp(280px, 40vw, 520px);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
}

body.page-template-template-guide .hero-inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-sm);

  color: var(--color-bg);

  position: relative;
  z-index: var(--z-base);
}

body.page-template-template-guide .hero-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,.35),
    rgba(0,0,0,.15)
  );

  pointer-events: none;
}


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

.guide-section .section-content a {
  color: var(--color-link, var(--color-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-section .section-content a:hover {
  text-decoration-thickness: 2px;
}


/* =========================================================
   LAYOUT FIXES
   ========================================================= */

/* Ta bort container-padding för jämförelsetabell */
.guide-comparison .destination-container {
  padding-left: 0;
  padding-right: 0;
}


/* =========================================================
   CTA (AFFILIATE FIX)
   ========================================================= */

body.page-template-template-guide .destination-cta {
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
}

body.page-template-template-guide .destination-cta_link {
  display: block;
  padding: 0; /* viktig */
}

body.page-template-template-guide .destination-cta_content {
  padding: var(--spacing-md);
}

body.page-template-template-guide .destination-cta_img img {
  border-radius: var(--radius-md);
}

body.page-template-template-guide .destination-cta_button {
  margin-top: var(--spacing-sm);
}


/* =========================================================
   SPACING
   ========================================================= */

body.page-template-template-guide .destination-map {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.guide-affiliate {
  margin-top: var(--spacing-xl);
}

.guide-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover; /* beskär kanterna om bilden inte matchar exakt */
}