/*==================================
  GENERAL & RESET
==================================*/

/* Basic reset for some heading elements */
h2,
h3,
h4 {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

/* Basic styles for lists */
ul {
    list-style: circle;
    padding-left: 18px;
}

/* Styles for icons (FontAwesome or similar) */
.far {
    margin: 0 10px 0 0;
    font-size: 16px;
}

.fa-circle-xmark {
    margin-left: 20px;
    color:#000
}

.fa-circle-xmark:hover {
    color:#c00
}

/* General link styles */
body a {
    color: #c00; /* Default color */
    text-decoration: underline; /* Default underline */
}

body a:hover,
body a:focus {
    text-decoration: underline;
    color: #000; /* Color on hover */
}

/* Card close button (could be a utility or component) */
.card_close_button {
    display: block;
}


/*==================================
  LAYOUT & GRID (EDITION)
==================================*/
.section-normal{margin:126px}

/* Main container for the edition */
.edition-container {
    max-width: 1280px;
    margin: 20px auto 0;
    padding: 0 15px;
}

/* Flex row for columns */
.edition-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* Compensates for column padding */
    align-items: flex-start; /* Align items to the start */
}

/* Base for columns (padding and box-sizing) */
.edition-image,
.edition-details,
.edition-full {
    padding: 0 15px;
    box-sizing: border-box;
    /* Flex and width properties will be defined in media queries (mobile-first) */
}

/* Default (mobile): Columns take full width */
.edition-image,
.edition-details,
.edition-full {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}


/*==================================
  COMPONENTS (EDITION SPECIFIC)
==================================*/

/* Image styles within the edition */
.edition-image img {
    width: 100%;
    height: auto; /* Ensure aspect ratio */
    margin-top:10px
}

.edition-image .img_score {
    border: 2px solid #ccc;
}

.edition-image .img_font {
    border: none;
}

.edition-details img {
    width: 100%;
    height: auto; /* Ensure aspect ratio */
}


/* Styles for iframes (videos, etc.) */
.container_iframe,
.container_iframe iframe {
    width: 100%;
    height: auto; /* Adjust height based on content or use aspect-ratio */
    display: block;
}


/* Styles for horizontal rules (hr) */
.edition-full hr {
    margin: 40px 0;
}

.edition-details hr {
    margin: 20px 0;
}


/* Styles for the edition header (author, title) */
.edition-author,
.edition-title {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 400;
    text-align: left;
    margin: 10px 0 10px; /* Bottom space */
    color: #111;
}

/* Specific adjustment for the edition title */
.edition-title {
    font-size: 2.2rem !important; /* !important is often avoidable, consider refactoring if possible */
    font-style: italic;
    font-family: var(--font-serif);
}

/* Font style for the general .edition-details block 
.edition-details {
    font-family: var(--font-serif);
}*/

/* Specific styles for headings within .edition-details and .edition-image */
.edition-image h4,
.edition-image h4 em {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight:500;
    margin-bottom:10px
}

.edition-image h4 em {
    font-style: italic;
}
/*
.edition-details h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-style: italic;
}*/

.edition-details > button {
    margin-right: 10px;
    margin-top: 10px;
    color: #333; /* Default text color of the button */
    background: #eee; /* Default background color of the button */
    border: 2px solid #333;
    border-radius: 4px;
    padding: 4px 10px; /* Padding applied to the button */
    cursor: pointer; /* Indicates the button is clickable */
    /* Make the transition duration longer and use an 'ease-in-out' timing function for a very smooth effect */
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

/* Apply hover effects directly to the button element */
.edition-details > button:hover {
    color: #c00; /* Change text color on hover */
    border-color: #c00; /* Optional: change border color on hover */
}

/* Styles for the anchor tag inside the button */
.edition-details > button a {
    color: inherit; /* The link inherits the color from the button (including hover color) */
    text-decoration: none; /* Remove underline from the link */
    /* Make the link fill the entire content area of the button */
    display: block;
    line-height: normal; /* Ensure text alignment is correct if display: block is used */
}

/*==================================
  MEDIA QUERIES
==================================*/
@media (max-width: 1279px) {
	.header-nav {margin-top:20px;/*ALTURA DEL MENU RESPONSIVE*/}
	.edition-container{margin-top:120px}
	.menu-button {margin-top: 0; }
	footer{margin-top:100px}
}



/* Desktop (>768px): details 2/3, image 1/3 */
@media (min-width: 769px) {
    .edition-details {
        flex: 0 0 66.666%;
        max-width: 66.666%;
        width: 66.666%;
    }

    .edition-image {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        width: 33.333%;
    }

    /* .edition-full is already 100% by default, no need to redefine here */
}

/* Specific adjustments for smaller screens (up to 600px) */
@media (max-width: 768px) {
	
/* Base for columns (padding and box-sizing) */
.edition-image,
.edition-details,
.edition-full {
    padding: 0 20px;
    box-sizing: border-box;
    /* Flex and width properties will be defined in media queries (mobile-first) */
}	

    .edition-full hr {
        margin: 10px 0 20px; /* Adjust margin for HR on mobile */
    }
        
    .edition-details{padding: 0 25px;}

    .edition-details img {
        margin-bottom: 15px; /* Bottom space for images in details */
    }

    .container_iframe {
        margin-bottom: 10px; /* Bottom space for iframes */
    }

    .edition-image img {
        margin-top: 20px; /* Adjust top margin for images in the image column */
        /* Be cautious with negative margins, they can affect flow */

    }

  /* Ocultamos la primera imagen */
  .rollover .img_score {
    display: none !important;
  }

  /* Mostramos siempre la segunda imagen */
  .rollover .img-top {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
  }

  /* Desactivamos el efecto hover (por si existiera) */
  .rollover:hover .img-top {
    opacity: 1 !important;
  }
}