/* Sub-headers - The "Modern Tech" Look */
.hspec {
    font-family: 'EB Garamond', serif;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.02em;
    margin-top: 0px;
    margin-bottom: 10px;

}




/* --- Main Container --- */
#pagination-container {
    max-width: 100%;
    margin: 20px auto;
    padding: 20px;
    background-color: #4a4a4a;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#item-list {
    min-height: 377px; /* Matches your specific requirement */
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.list-item {
    display: none;
    padding: 15px 5px;
    border-bottom: 1px dotted #aaaaaa;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.2;
    color: #fff;
}

.list-item.active {
    display: block;
    animation: fadeIn 0.4s ease-out forwards;
}


.inline-wrap-img {
    float: right;
    width: clamp(240px, 48%, 310px); /* Fluid width that doesn't overwhelm the text */
    //aspect-ratio: 1 / 1; /* Keeping it square looks very "news-headline" */
    object-fit: cover;
    margin-left: 27px;
    margin-bottom: 8px;
    border: 4px solid #888;
    border-radius: 8px;
}


/* --- Navigation Wrapper --- */
.pagination-nav {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    width: 100%; /* Ensures it can use the full container width */
}

/* --- The Widened Button Group --- */
.button-group {
    display: flex;
    /* Increased width: You can adjust this percentage or use pixels (e.g., 700px) */
    width: 95%; 
    max-width: 100%; 
    border: 1px solid #808080;
    border-radius: 8px;
    overflow: hidden;
    background-color: #555555; /* Matches your dark theme button color */
}

/* --- Larger, Equal-Width Buttons --- */
.button-group button {
    flex: 1; /* Makes every button take up equal space */
    background-color: #555555;
    color: #ccc;
    border: none;
    /* Increased padding (15px, now 8px) makes them vertically taller and easier to hit */
    padding: 8px 10px; 
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-right: 1px solid #808080; /* Separator line */
}

/* Ensuring the page info span stays proportional */
.button-group span#page-num {
    flex: 1.5; /* Gives the text area slightly more room than the buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #555;
    color: #ccc;
    font-size: 0.95rem;
    border-right: 1px solid #808080;
    text-align: center;
}

.button-group button:last-child {
    border-right: none;
}

/* Hover Effect */
.button-group button:hover:not(:disabled) {
    background-color: #666666;
    color: #fff;
}


#page-num {
    border-right: 1px solid #555;
    cursor: default;
    background-color: #555;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}






.bodgestandard{
 font: bold 12px Arial,sans-serif;
 color: #80c080;
 margin-bottom: 8px;
}

.digit{
 font-family: Arial,sans-serif;
 font-size: 1.2rem;
 font-weight: bold;
 color: #80e080;
}

.griftstandard{
 font-family: 'Roboto', sans-serif;
 font-size: 1rem;
 font-weight: bold;
 color: #b787d7;
}

.monodiv  {margin-top: 12px; border-top: 1px dotted #808080; margin-bottom: 12px;}

.jvc{
 font-family: Arial,sans-serif;
 font-size: 0.8rem;
 font-weight: bold;
 color: #80d0a0;
}

.adl{
 font-size: 1.2rem;
 color: #b777ff;
}



.article-card {
    width: 100%;
    height: 100%;    /* Forces the card to fill the entire grid cell height */
    //max-width: 800px;      /* Article cards are often wider than book cards */
    background: var(--card-color, #eeeeee);
    border-radius: 12px;  /* The master curve */
    overflow: hidden;     /* The cookie cutter */
    margin: 0px auto;
    //box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column; /* Stacks image on top of text */
}

.article-card img {
    width: 100%;
    aspect-ratio: var(--img-ratio, 16/9);
    border-radius: 0px;
    object-fit: cover; 
    object-position: var(--img-focus, center); 
}

.article-body {
    display: flex;
    flex-direction: column; /* Stacks text and link vertically */
    flex-grow: 1;
    padding: 0px 20px 20px 20px;        /* This provides the "Frame" for the text */
    color: #333333;
}

.article-body a, 
.article-body .read-more {
    margin-top: auto;       /* This is the 'spring' that only pushes the link */
    align-self: flex-start; /* Keeps the link on the left (optional) */
}

.text-lock {
    /* No special margins here; it just sits at the top naturally */
}




.shadowlight {
    border-radius: 0px 0px 12px 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    margin-bottom: 28px;
}

.shadowlight img {
    border-radius: 12px 12px 0px 0px;
}

.shadowlight-body {
    padding: 5px 18px 18px 18px;
}




.fixlight {
    border-radius: 12px 12px 12px 12px;
    background: #eeeeee;
}

.fixlight img {
    width: 100%;
    border-radius: 12px 12px 0px 0px;
}

.fixlight-body {
    padding: 5px 18px 18px 18px;
}




.image-switch {
  position: relative;
  width: 100%; /* Or match your card width */
  height: auto;
}

.image-one {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.8s;
  cursor: pointer;
  z-index: 2;
}

.image-two {
  display: block;
  width: 100%;
  z-index: 1;
}

.transparentcall {
  opacity: 0;
}



.vger {
    margin: 0px;
    padding: 0px;
    //border-bottom: 1px dotted #aaaaaa;
    font-family: "Roboto", sans-serif;
    font-size: 1.2rem;
    line-height: 1.0;
    color: #d0d0d0;
}