html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Featured posts slideshow on Blog index */
.featured-slideshow::-webkit-scrollbar {
  height: 6px;
}

.featured-slideshow::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.featured-slide .card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.featured-slide:hover .card {
  transform: translateY(-4px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

/* Post card overflow safety */
.card .flex-grow-1 {
  min-width: 0;
}

.card .flex-grow-1 .card-text,
.card .flex-grow-1 .card-title {
  overflow-wrap: anywhere;
}

/* =====================================================================
   THORQUI — Travel Journal Theme
   Warm, diary-style palette layered on top of Bootstrap + theme vars.
   ===================================================================== */

:root {
  --tj-terracotta: #c96f4a;
  --tj-terracotta-dark: #a8552f;
  --tj-sea: #2c5d7c;
  --tj-cream: #fbf7f1;
  --tj-ink: #333333;
  --tj-muted: #7a6f66;
  --tj-border: #ece4d8;
  --tj-shadow: 0 .5rem 1.25rem rgba(60, 40, 20, .08);
  --tj-shadow-hover: 0 .75rem 1.75rem rgba(60, 40, 20, .15);
  --tj-serif: 'Lora', 'Georgia', 'Times New Roman', serif;
  --tj-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: var(--tj-sans);
  background-color: var(--tj-cream);
  color: var(--tj-ink);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--tj-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #2a2622;
}

p { line-height: 1.75; }

a { color: var(--tj-sea); }
a:hover { color: var(--tj-terracotta-dark); }

/* Buttons — softer, rounder */
.btn {
  border-radius: 999px;
  padding-inline: 1.1rem;
  font-weight: 500;
}
.btn-sm { padding-inline: .85rem; }
.btn-primary {
  background-color: var(--tj-terracotta);
  border-color: var(--tj-terracotta);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--tj-terracotta-dark);
  border-color: var(--tj-terracotta-dark);
}
.btn-outline-primary {
  color: var(--tj-terracotta);
  border-color: var(--tj-terracotta);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--tj-terracotta);
  border-color: var(--tj-terracotta);
  color: #fff;
}

/* Navbar */
.navbar.bg-white {
  background-color: rgba(255, 255, 255, .92) !important;
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--tj-border) !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1030;
}
.navbar .dropdown-menu {
  z-index: 1040;
}
.navbar-brand {
  font-family: var(--tj-serif);
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--tj-terracotta) !important;
}
.navbar-brand .tj-brand-mark {
  width: 1.4em;
  height: 1.4em;
  color: var(--tj-terracotta);
}
.navbar .nav-link.text-dark {
  color: var(--tj-ink) !important;
  font-weight: 500;
}
.navbar .nav-link.text-dark:hover {
  color: var(--tj-terracotta) !important;
}

/* Center nav link text within its cell so wrapped labels (e.g. "Sobre nosotros",
   "Mi cuenta", "Cerrar sesión") don't look misaligned. Also vertically align
   items so taller two-line links sit nicely next to single-line ones. */
.navbar .navbar-nav {
  align-items: center;
}
.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .navbar-text {
  text-align: center;
}
.navbar .navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

/* Cards */
.card {
  border-radius: 1rem;
  border: 1px solid var(--tj-border);
  background-color: #ffffff;
  box-shadow: var(--tj-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tj-shadow-hover);
}

/* =====================================================================
   HOME — Hero
   ===================================================================== */
.tj-hero {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(135deg, rgba(44, 93, 124, .55), rgba(201, 111, 74, .55)),
    linear-gradient(135deg, #2c5d7c 0%, #c96f4a 100%);
  background-size: cover;
  background-position: center;
  color: #fff;
  margin-bottom: 3rem;
}
.tj-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%);
  pointer-events: none;
}
.tj-hero__inner {
  position: relative;
  z-index: 1;
  padding: 3rem 2rem;
  max-width: 720px;
}
.tj-hero__title {
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  margin-bottom: .75rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.tj-hero__tagline {
  font-family: var(--tj-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: rgba(255,255,255,.92);
  margin-bottom: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

.tj-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 1.5rem;
}
.tj-section-heading h2 {
  position: relative;
  margin: 0;
  padding-bottom: .35rem;
}
.tj-section-heading h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: .4rem;
  background: var(--tj-terracotta);
  border-radius: 999px;
}

.tj-intro {
  font-family: var(--tj-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--tj-muted);
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}

.tj-cta {
  text-align: center;
  margin: 3rem 0;
}

/* =====================================================================
   POST CARD — bigger image, hover lift
   ===================================================================== */
.tj-post-card .tj-post-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f3ece1;
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.tj-post-card .tj-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.tj-post-card:hover .tj-post-card__media img {
  transform: scale(1.04);
}
.tj-post-card .card-title a { color: #2a2622; }
.tj-post-card .card-title a:hover { color: var(--tj-terracotta); }
.tj-post-card .tj-post-meta {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tj-muted);
}

/* =====================================================================
   POST PAGE — travel entry header
   ===================================================================== */
.tj-post-header { margin-bottom: 2rem; }
.tj-post-header__date {
  font-family: var(--tj-sans);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tj-muted);
}
.tj-post-header__day {
  display: inline-block;
  margin-left: .75rem;
  padding: .15rem .65rem;
  background: var(--tj-terracotta);
  color: #fff;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tj-post-header__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin: .75rem 0 1rem;
}
.tj-post-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  font-size: .9rem;
  color: var(--tj-muted);
}
.tj-post-header__meta .badge {
  background-color: var(--tj-sea) !important;
  color: #fff;
  font-weight: 500;
  border-radius: 999px;
  padding: .35em .7em;
}

.blog-content {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.85;
}
.blog-content img,
.blog-content figure.image img {
  border-radius: .5rem;
  box-shadow: var(--tj-shadow);
}
.blog-content figure.image,
.blog-content p:has(> img) {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.blog-content blockquote {
  border-left: 4px solid var(--tj-terracotta);
  font-family: var(--tj-serif);
  font-size: 1.15rem;
  color: var(--tj-ink);
}

.tj-post-hero {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  margin: 0 auto 2rem;
  max-width: 760px;
  background: #f3ece1;
  box-shadow: var(--tj-shadow);
  aspect-ratio: 16 / 9;
}
.tj-post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 576px) {
  .tj-post-hero {
    border-radius: .75rem;
    margin-bottom: 1.25rem;
  }
}

/* =====================================================================
   DIARY CONTENT LAYOUTS — author-friendly image/text blocks
   Inserted from the editor as plain HTML; render inside .blog-content.
   ===================================================================== */
.blog-content .diary-image-full,
.blog-content .diary-image-grid,
.blog-content .diary-split,
.blog-content .diary-section-break {
  margin: 2rem 0;
}
.blog-content .diary-image-full figure,
.blog-content .diary-image-grid figure,
.blog-content .diary-split figure {
  margin: 0;
}
.blog-content .diary-image-full img,
.blog-content .diary-image-grid img,
.blog-content .diary-split img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: .75rem;
  box-shadow: var(--tj-shadow, 0 6px 18px rgba(0, 0, 0, .08));
}
.blog-content .diary-caption,
.blog-content .diary-image-full figcaption,
.blog-content .diary-image-grid figcaption,
.blog-content .diary-split figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--tj-muted, #6c757d);
  font-style: italic;
  text-align: center;
}

/* Single full-width image */
.blog-content .diary-image-full {
  max-width: 100%;
}

/* Image grids (2 or 3 columns, stack on mobile) */
.blog-content .diary-image-grid {
  display: grid;
  gap: 1rem;
}
.blog-content .diary-image-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-content .diary-image-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .blog-content .diary-image-grid-2,
  .blog-content .diary-image-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Split layout: text + image side by side */
.blog-content .diary-split {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}
.blog-content .diary-split > div p:last-child {
  margin-bottom: 0;
}
.blog-content .diary-split.diary-split-image-left > figure { order: 0; }
.blog-content .diary-split.diary-split-image-left > div    { order: 1; }
.blog-content .diary-split.diary-split-image-right > div    { order: 0; }
.blog-content .diary-split.diary-split-image-right > figure { order: 1; }
@media (max-width: 768px) {
  .blog-content .diary-split {
    grid-template-columns: 1fr;
  }
  .blog-content .diary-split > figure,
  .blog-content .diary-split > div {
    order: initial !important;
  }
}

/* Decorative section break */
.blog-content .diary-section-break {
  text-align: center;
  letter-spacing: .6em;
  color: var(--tj-terracotta, #c0623f);
  font-size: 1.1rem;
  padding: .5rem 0;
  border: 0;
}

/* Lighter version of the same blocks while editing inside CKEditor */
.ck-content .diary-image-full,
.ck-content .diary-image-grid,
.ck-content .diary-split {
  outline: 1px dashed rgba(0, 0, 0, .15);
  outline-offset: 4px;
  padding: .5rem;
  border-radius: .5rem;
}
.ck-content .diary-image-grid {
  display: grid;
  gap: 1rem;
}
.ck-content .diary-image-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-content .diary-image-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-content .diary-split { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.ck-content .diary-image-full img,
.ck-content .diary-image-grid img,
.ck-content .diary-split img { max-width: 100%; height: auto; }

/* =====================================================================
   GALLERY — pill filters + hover overlay
   ===================================================================== */
.tj-filter-pill {
  border-radius: 999px;
  padding: .35rem .85rem;
  font-weight: 500;
  font-size: .85rem;
  border: 1px solid var(--tj-border);
  background: #fff;
  color: var(--tj-ink);
  text-decoration: none;
  transition: all .2s ease;
}
.tj-filter-pill:hover {
  border-color: var(--tj-terracotta);
  color: var(--tj-terracotta);
}
.tj-filter-pill.is-active {
  background: var(--tj-terracotta);
  border-color: var(--tj-terracotta);
  color: #fff;
}

.tj-gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}
.tj-gallery-card .gallery-thumb { display: block; width: 100%; }
.tj-gallery-card .gallery-thumb img {
  transition: transform .5s ease;
}
.tj-gallery-card:hover .gallery-thumb img {
  transform: scale(1.06);
}
.tj-gallery-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem 1rem .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  color: #fff;
  font-family: var(--tj-serif);
  font-size: .95rem;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.tj-gallery-card:hover .tj-gallery-card__overlay {
  opacity: 1;
}

/* =====================================================================
   Mobile tuning
   ===================================================================== */
@media (max-width: 576px) {
  .tj-hero { min-height: 55vh; }
  .tj-hero__inner { padding: 2rem 1.25rem; }
  .tj-section-heading { flex-direction: column; align-items: flex-start; }
  .blog-content { font-size: 1rem; }
}