/**
 * Single Base Styles
 * Consolidación de single.css + block-editor.css
 * Estilos base para vistas single y bloques del editor
 */

/* ========================================
   Variables CSS
   ======================================== */
:root {
  --wp--style--global--content-size: 962px !important;
}

/* ========================================
   Body & Base Styles
   ======================================== */
body {
  background-color: var(--color-sand);
}

.content-single  *{
 color: var(--color-smoke-60);
}

.content-single .has-text-align-center{
  text-align: center;
}
.content-single .has-text-align-left{
  text-align: left;
}
.content-single .has-text-align-right{
  text-align: right;
}

/* ========================================
   Typography
   ======================================== */
.content-single p {
  font-family: var(--font-apercu);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
  @media (min-width: 767px) {
    font-size: 16px;
  }
}

/* H1 - Largest (heading-xl) */
.content-single h1 {
  width: 100%;
  font-style: normal;
  font-size: 20px;
  color: var(--color-smoke-60);
  text-align: center;
  font-family: var(--font-sn-leif);
  font-weight: 300;
  line-height: 120%;
  margin-bottom: 20px;
  @media (min-width: 767px) {
    font-size: 30px;
  }
  @media (min-width: 1440px) {
    font-size: 40px;
  }
}

/* H2 - Large (heading-m) */
.content-single h2 {
  width: 100%;
  font-style: normal;
  font-size: 18px;
  color: var(--color-smoke-60);
  text-align: center;
  font-family: var(--font-sn-leif);
  font-weight: 300;
  line-height: 125%;
  margin-bottom: 20px;
  @media (min-width: 767px) {
    font-size: 24px;
  }
  @media (min-width: 1440px) {
    font-size: 30px;
  }
}

/* H3 - Medium (heading-lg) */
.content-single h3 {
  width: 100%;
  font-style: normal;
  font-size: 16px;
  color: var(--color-smoke-60);
  text-align: center;
  font-family: var(--font-sn-leif);
  font-weight: 300;
  line-height: 125%;
  margin-bottom: 20px;
  @media (min-width: 767px) {
    font-size: 20px;
  }
  @media (min-width: 1440px) {
    font-size: 24px;
  }
}

/* H4 - Small heading */
.content-single h4 {
  width: 100%;
  font-style: normal;
  font-size: 14px;
  color: var(--color-smoke-60);
  text-align: center;
  font-family: var(--font-sn-leif);
  font-weight: 300;
  line-height: 125%;
  margin-bottom: 20px;
  @media (min-width: 767px) {
    font-size: 18px;
  }
  @media (min-width: 1440px) {
    font-size: 20px;
  }
}

/* H5 - Extra small heading */
.content-single h5 {
  width: 100%;
  font-style: normal;
  font-size: 14px;
  color: var(--color-smoke-60);
  text-align: center;
  font-family: var(--font-sn-leif);
  font-weight: 300;
  line-height: 125%;
  margin-bottom: 20px;
  @media (min-width: 767px) {
    font-size: 16px;
  }
  @media (min-width: 1440px) {
    font-size: 18px;
  }
}

/* H6 - Paragraph style */
.content-single h6 {
  width: 100%;
  font-style: normal;
  font-size: 14px;
  color: var(--color-smoke-60);
  text-align: center;
  font-family: var(--font-apercu);
  font-weight: 400;
  line-height: 125%;
  margin-bottom: 20px;
  @media (min-width: 767px) {
    font-size: 16px;
  }
}

/* ========================================
   Columns & Images
   ======================================== */
.content-single .wp-block-columns {
  gap: 8px;
  @media (min-width: 767px) {
    gap: 16px;
  }
}
.content-single .wp-block-columns{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.content-single .wp-block-columns .wp-block-column{
  width: 50%;
}
.content-single .wp-block-columns .wp-block-column .wp-block-image {
  padding: 0px !important;
}
.content-single .wp-block-columns .wp-block-column .wp-block-image img{
  width: 100%;
  height: 271px;
  object-fit: cover;
  @media (min-width: 767px) {
    height: 557px;
  }
  @media (min-width: 1440px) {
    height: 735px;
  }
}
.content-single .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
}

/* ========================================
   CTA Bottom
   ======================================== */
.cta-bottom-single a {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 125%;
  @media (min-width: 767px) {
    font-size: 14px;

  }
  @media (min-width: 1440px) {
    font-size: 16px;
  }
}

/* ========================================
   GAP - Small (8px → 16px)
   ======================================== */

/* Frontend & Editor - Mobile: 8px */
.has-drift-gap-small,
.has-drift-gap-small .wp-block-group__inner-container,
.editor-styles-wrapper .has-drift-gap-small,
.editor-styles-wrapper .has-drift-gap-small .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.has-drift-gap-x-small,
.has-drift-gap-x-small .wp-block-group__inner-container,
.editor-styles-wrapper .has-drift-gap-x-small,
.editor-styles-wrapper .has-drift-gap-x-small .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Tablet y Desktop: 16px */
@media (min-width: 767px) {
  .has-drift-gap-small,
  .has-drift-gap-small .wp-block-group__inner-container,
  .editor-styles-wrapper .has-drift-gap-small,
  .editor-styles-wrapper .has-drift-gap-small .wp-block-group__inner-container {
    gap: 16px !important;
  }
}

/* ========================================
   GAP - Medium (16px → 20px)
   ======================================== */

/* Frontend & Editor - Mobile: 16px */
.has-drift-gap-medium,
.has-drift-gap-medium .wp-block-group__inner-container,
.editor-styles-wrapper .has-drift-gap-medium,
.editor-styles-wrapper .has-drift-gap-medium .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Tablet y Desktop: 20px */
@media (min-width: 767px) {
  .has-drift-gap-medium,
  .has-drift-gap-medium .wp-block-group__inner-container,
  .editor-styles-wrapper .has-drift-gap-medium,
  .editor-styles-wrapper .has-drift-gap-medium .wp-block-group__inner-container {
    gap: 20px !important;
  }
}

/* ========================================
   GAP - Large (16px → 46px)
   ======================================== */

/* Frontend & Editor - Mobile: 16px */
.has-drift-gap-large,
.has-drift-gap-large .wp-block-group__inner-container,
.editor-styles-wrapper .has-drift-gap-large,
.editor-styles-wrapper .has-drift-gap-large .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Tablet y Desktop: 46px */
@media (min-width: 767px) {
  .has-drift-gap-large,
  .has-drift-gap-large .wp-block-group__inner-container,
  .editor-styles-wrapper .has-drift-gap-large,
  .editor-styles-wrapper .has-drift-gap-large .wp-block-group__inner-container {
    gap: 46px !important;
  }
}

/* ========================================
   TEXT SIZE - Small (14px)
   Merged: .has-drift-text-small + .content-single .has-drift-text-small
   ======================================== */
.has-drift-text-small,
.content-single .has-drift-text-small,
.editor-styles-wrapper .has-drift-text-small {
  font-family: var(--font-apercu);
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
}

/* ========================================
   PREVIEW CUSTOM: Gap inline en editor
   ======================================== */

/* Heredar gap custom inline en contenedor interno de Group */
.editor-styles-wrapper [style*="gap"] > .wp-block-group__inner-container {
  display: inherit;
  flex-direction: inherit;
  gap: inherit;
}

/* ========================================
   Hero Featured Single - Button Widths
   Matches content-single-* padding values
   ======================================== */

/* Guide - Left Button */
.hero-left-guide {
  @media (min-width: 768px) {
    width: 134px;
  }
  @media (min-width: 1024px) {
    width: 158.4px;
  }
  @media (min-width: 1280px) {
    width: 158.4px;
  }
}

/* Journal - Left Button */
.hero-left-journal {
  @media (min-width: 768px) {
    width: 134px;
  }
  @media (min-width: 1024px) {
    width: 134px;
  }
  @media (min-width: 1280px) {
    width: 158.4px;
  }
}

/* Guide & Journal - Right Button/Padding */
.hero-right-guide{
  @media (min-width: 768px) {
    width: 120px;
  }
  @media (min-width: 1024px) {
    width: 135px;
  }
  @media (min-width: 1280px) {
    width: 120px;
  }
}
.hero-right-journal {
  @media (min-width: 768px) {
    width: 120px;
  }
  @media (min-width: 1024px) {
    width: 120px;
  }
  @media (min-width: 1280px) {
    width: 120px;
  }
}

/* Guide & Journal - Padding Right (when no right button) */
.hero-pr-guide,
.hero-pr-journal {
  @media (min-width: 768px) {
    padding-right: 120px;
  }
  @media (min-width: 1024px) {
    padding-right: 120px;
  }
  @media (min-width: 1280px) {
    padding-right: 120px;
  }
}

/* ========================================
   Hero Featured Single - Title Padding
   Matches button widths for proper alignment
   ======================================== */

/* Guide - Title Padding */
.hero-title-guide {
  padding-inline: 16px;
  @media (min-width: 768px) {
    padding-left: 134px;
    padding-right: 120px;
  }
  @media (min-width: 1024px) {
    padding-left: 158.4px;
    padding-right: 120px;
  }
  @media (min-width: 1280px) {
    padding-left: 158.4px;
    padding-right: 120px;
  }
}

/* Journal - Title Padding */
.hero-title-journal {
  padding-inline: 16px;
  @media (min-width: 768px) {
    padding-left: 134px;
    padding-right: 120px;
  }
  @media (min-width: 1024px) {
    padding-left: 134px;
    padding-right: 120px;
  }
  @media (min-width: 1280px) {
    padding-left: 158.4px;
    padding-right: 120px;
  }
}

/* Hotel - Title Padding */
.hero-title-hotel {
  padding-inline: 16px;
  @media (min-width: 768px) {
    padding-left: 60px;
    padding-right: 60px;
  }
  @media (min-width: 1024px) {
    padding-left: 150px;
    padding-right: 150px;
  }
  @media (min-width: 1280px) {
    padding-left: 160px;
    padding-right: 160px;
  }
}