/*
 Theme Name:   Travel Magazine Child
 Theme URI:    https://travelmagazine.com.ar
 Description:  Child theme de Travel Magazine. Basado en GeneratePress.
 Author:       GCDC
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  tm-child
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Travel Magazine
   Paleta extraída del diseño: negro + dorado + blanco + grises
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Colores primarios */
    --tm-black:          #111111;
    --tm-gold:           #B8860B;
    --tm-gold-light:     #D4A017;
    --tm-gold-dark:      #8B6508;
    --tm-white:          #FFFFFF;

    /* Grises */
    --tm-gray-100:       #F8F8F6;
    --tm-gray-200:       #F0EFE9;
    --tm-gray-300:       #E5E4DC;
    --tm-gray-400:       #CCCCCC;
    --tm-gray-500:       #999999;
    --tm-gray-700:       #555555;
    --tm-gray-900:       #222222;

    /* Tipografías */
    --tm-font-serif:     'Playfair Display', 'Georgia', serif;
    --tm-font-sans:      'Inter', 'Helvetica Neue', Arial, sans-serif;
    --tm-font-display:   'Cormorant Garamond', var(--tm-font-serif);

    /* Tamaños de fuente (clamp: responsive) */
    --tm-text-xs:        clamp(0.7rem,  1vw, 0.75rem);
    --tm-text-sm:        clamp(0.8rem,  1.2vw, 0.875rem);
    --tm-text-base:      clamp(0.9rem,  1.5vw, 1rem);
    --tm-text-md:        clamp(1rem,    1.8vw, 1.125rem);
    --tm-text-lg:        clamp(1.1rem,  2vw, 1.25rem);
    --tm-text-xl:        clamp(1.3rem,  2.5vw, 1.5rem);
    --tm-text-2xl:       clamp(1.6rem,  3vw, 2rem);
    --tm-text-3xl:       clamp(2rem,    4vw, 2.75rem);
    --tm-text-hero:      clamp(2.5rem,  6vw, 4.5rem);

    /* Espaciados */
    --tm-space-xs:       0.5rem;
    --tm-space-sm:       1rem;
    --tm-space-md:       1.5rem;
    --tm-space-lg:       2rem;
    --tm-space-xl:       3rem;
    --tm-space-2xl:      5rem;

    /* Layout */
    --tm-max-width:      1280px;
    --tm-content-width:  780px;
    --tm-sidebar-width:  340px;
    --tm-gap:            2rem;

    /* Radios */
    --tm-radius-sm:      4px;
    --tm-radius-md:      8px;
    --tm-radius-lg:      16px;

    /* Sombras */
    --tm-shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
    --tm-shadow-md:      0 4px 20px rgba(0,0,0,0.12);
    --tm-shadow-lg:      0 8px 40px rgba(0,0,0,0.18);
    --tm-shadow-gold:    0 4px 20px rgba(184,134,11,0.25);

    /* Transiciones */
    --tm-transition:     0.25s ease;
    --tm-transition-slow:0.4s ease;

    /* Header */
    --tm-header-height:  72px;
    --tm-header-bg:      var(--tm-black);
    --tm-header-color:   var(--tm-white);

    /* Z-index */
    --tm-z-header:       1000;
    --tm-z-overlay:      900;
    --tm-z-modal:        1100;
    --tm-z-toast:        1200;
}

/* ═══════════════════════════════════════════════════════════════
   RESET Y BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:    var(--tm-font-sans);
    font-size:      var(--tm-text-base);
    color:          var(--tm-gray-900);
    background:     var(--tm-white);
    line-height:    1.7;
    margin:         0;
    padding:        0;
}

img, video { max-width: 100%; height: auto; display: block; }

a {
    color: var(--tm-gold);
    text-decoration: none;
    transition: color var(--tm-transition);
}

a:hover { color: var(--tm-gold-dark); }

/* ═══════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family:  var(--tm-font-serif);
    color:        var(--tm-black);
    line-height:  1.2;
    margin:       0 0 var(--tm-space-sm);
    font-weight:  700;
}

h1 { font-size: var(--tm-text-3xl); }
h2 { font-size: var(--tm-text-2xl); }
h3 { font-size: var(--tm-text-xl); }
h4 { font-size: var(--tm-text-lg); }

p { margin: 0 0 var(--tm-space-sm); }

.tm-overline {
    font-family:    var(--tm-font-sans);
    font-size:      var(--tm-text-xs);
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--tm-gold);
}

.tm-display {
    font-family: var(--tm-font-display);
    font-weight: 300;
    font-style:  italic;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.tm-container {
    max-width:     var(--tm-max-width);
    margin:        0 auto;
    padding:       0 var(--tm-space-lg);
}

.tm-grid-4 {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--tm-gap);
}

.tm-grid-3 {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--tm-gap);
}

.tm-grid-2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--tm-gap);
}

.tm-with-sidebar {
    display:               grid;
    grid-template-columns: 1fr var(--tm-sidebar-width);
    gap:                   var(--tm-gap);
    align-items:           start;
}

@media ( max-width: 1024px ) {
    .tm-grid-4    { grid-template-columns: repeat(2, 1fr); }
    .tm-with-sidebar { grid-template-columns: 1fr; }
}

@media ( max-width: 640px ) {
    .tm-grid-4, .tm-grid-3, .tm-grid-2 { grid-template-columns: 1fr; }
    .tm-container { padding: 0 var(--tm-space-sm); }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.tm-header {
    position:       fixed;
    top:            0;
    left:           0;
    right:          0;
    height:         var(--tm-header-height);
    background:     var(--tm-header-bg);
    z-index:        var(--tm-z-header);
    display:        flex;
    align-items:    center;
    border-bottom:  1px solid rgba(255,255,255,0.08);
}

.tm-header__logo {
    font-family:    var(--tm-font-serif);
    font-size:      var(--tm-text-lg);
    color:          var(--tm-white) !important;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tm-header__logo span {
    color:       var(--tm-gold);
    font-weight: 300;
    font-size:   var(--tm-text-xs);
    display:     block;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.tm-nav a {
    color:          rgba(255,255,255,0.85);
    font-size:      var(--tm-text-sm);
    font-weight:    500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding:        0 var(--tm-space-sm);
    transition:     color var(--tm-transition);
}

.tm-nav a:hover,
.tm-nav a.current { color: var(--tm-gold); }

/* ═══════════════════════════════════════════════════════════════
   CARDS DE ARTÍCULO
   ═══════════════════════════════════════════════════════════════ */
.tm-card {
    position:       relative;
    overflow:       hidden;
    border-radius:  var(--tm-radius-sm);
    background:     var(--tm-white);
    transition:     transform var(--tm-transition), box-shadow var(--tm-transition);
    cursor:         pointer;
}

.tm-card:hover {
    transform:    translateY(-4px);
    box-shadow:   var(--tm-shadow-md);
}

.tm-card__image {
    position:    relative;
    overflow:    hidden;
    aspect-ratio: 16/10;
}

.tm-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--tm-transition-slow);
}

.tm-card:hover .tm-card__image img {
    transform: scale(1.05);
}

.tm-card__badge {
    position:    absolute;
    top:         var(--tm-space-sm);
    left:        var(--tm-space-sm);
    background:  var(--tm-gold);
    color:       var(--tm-white);
    font-size:   var(--tm-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:     4px 10px;
    border-radius: var(--tm-radius-sm);
}

.tm-card__body {
    padding: var(--tm-space-sm) 0;
}

.tm-card__cat {
    font-size:      var(--tm-text-xs);
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--tm-gold);
    margin-bottom:  var(--tm-space-xs);
}

.tm-card__title {
    font-family:  var(--tm-font-serif);
    font-size:    var(--tm-text-lg);
    color:        var(--tm-black);
    line-height:  1.3;
    margin-bottom: var(--tm-space-xs);
    transition:   color var(--tm-transition);
}

.tm-card:hover .tm-card__title { color: var(--tm-gold-dark); }

.tm-card__excerpt {
    font-size:  var(--tm-text-sm);
    color:      var(--tm-gray-700);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.tm-hero {
    position:   relative;
    min-height: 90vh;
    display:    flex;
    align-items: flex-end;
    overflow:   hidden;
    background: var(--tm-black);
}

.tm-hero__bg {
    position:   absolute;
    inset:      0;
    object-fit: cover;
    width:      100%;
    height:     100%;
    opacity:    0.7;
}

.tm-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.4) 50%,
        rgba(0,0,0,0.1) 100%
    );
}

.tm-hero__content {
    position:   relative;
    z-index:    2;
    padding:    var(--tm-space-2xl) 0 var(--tm-space-xl);
}

.tm-hero__title {
    font-family:  var(--tm-font-serif);
    font-size:    var(--tm-text-hero);
    color:        var(--tm-white);
    line-height:  1.05;
    max-width:    700px;
    margin-bottom: var(--tm-space-sm);
}

.tm-hero__subtitle {
    font-size: var(--tm-text-md);
    color:     rgba(255,255,255,0.8);
    max-width: 550px;
    margin-bottom: var(--tm-space-lg);
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════ */
.tm-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.75rem 1.75rem;
    font-family:     var(--tm-font-sans);
    font-size:       var(--tm-text-sm);
    font-weight:     600;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    border:          none;
    border-radius:   var(--tm-radius-sm);
    cursor:          pointer;
    transition:      all var(--tm-transition);
    text-decoration: none;
}

.tm-btn--primary {
    background: var(--tm-gold);
    color:      var(--tm-white);
}

.tm-btn--primary:hover {
    background: var(--tm-gold-dark);
    color:      var(--tm-white);
    box-shadow: var(--tm-shadow-gold);
    transform:  translateY(-1px);
}

.tm-btn--outline {
    background:  transparent;
    color:       var(--tm-gold);
    border:      1.5px solid var(--tm-gold);
}

.tm-btn--outline:hover {
    background: var(--tm-gold);
    color:      var(--tm-white);
}

.tm-btn--ghost {
    background:  transparent;
    color:       var(--tm-white);
    border:      1px solid rgba(255,255,255,0.4);
}

.tm-btn--ghost:hover {
    background: rgba(255,255,255,0.1);
    color:      var(--tm-white);
}

/* ═══════════════════════════════════════════════════════════════
   SECCIONES HOME
   ═══════════════════════════════════════════════════════════════ */
.tm-section {
    padding: var(--tm-space-2xl) 0;
}

.tm-section--gray { background: var(--tm-gray-100); }
.tm-section--dark { background: var(--tm-black); color: var(--tm-white); }

.tm-section__header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    margin-bottom:   var(--tm-space-lg);
    border-bottom:   1px solid var(--tm-gray-300);
    padding-bottom:  var(--tm-space-sm);
}

.tm-section__title {
    font-family:  var(--tm-font-serif);
    font-size:    var(--tm-text-2xl);
    color:        var(--tm-black);
    margin:       0;
}

.tm-section__link {
    font-size:      var(--tm-text-xs);
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--tm-gold);
    white-space:    nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   PUBLICIDAD
   ═══════════════════════════════════════════════════════════════ */
.tm-ad-block {
    width:      100%;
    background: var(--tm-gray-100);
    border:     1px solid var(--tm-gray-300);
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    var(--tm-space-lg);
    margin:     var(--tm-space-xl) 0;
    position:   relative;
}

.tm-ad-block::before {
    content:        'PUBLICIDAD';
    position:       absolute;
    top:            -10px;
    left:           50%;
    transform:      translateX(-50%);
    font-size:      10px;
    letter-spacing: 0.2em;
    color:          var(--tm-gray-500);
    background:     var(--tm-white);
    padding:        2px 12px;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.tm-footer {
    background:    var(--tm-black);
    color:         rgba(255,255,255,0.7);
    padding:       var(--tm-space-2xl) 0 var(--tm-space-lg);
    font-size:     var(--tm-text-sm);
}

.tm-footer__logo {
    font-family:    var(--tm-font-serif);
    font-size:      var(--tm-text-xl);
    color:          var(--tm-white);
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom:  var(--tm-space-xs);
}

.tm-footer a {
    color:      rgba(255,255,255,0.6);
    transition: color var(--tm-transition);
}

.tm-footer a:hover { color: var(--tm-gold); }

.tm-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: var(--tm-space-sm);
    margin-top:  var(--tm-space-xl);
    font-size:   var(--tm-text-xs);
    color:       rgba(255,255,255,0.4);
    text-align:  center;
}

/* ═══════════════════════════════════════════════════════════════
   BARRA DE OFFSET DEL HEADER FIJO
   ═══════════════════════════════════════════════════════════════ */
.tm-body-offset {
    padding-top: var(--tm-header-height);
}

/* ═══════════════════════════════════════════════════════════════
   UTILIDADES
   ═══════════════════════════════════════════════════════════════ */
.tm-text-gold    { color: var(--tm-gold); }
.tm-text-white   { color: var(--tm-white); }
.tm-text-center  { text-align: center; }
.tm-text-right   { text-align: right; }
.tm-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}