/* Stories page (LT `istorijos` = page 75, EN `stories` = page 76).
   The page used to be one wp:html blob in patterns/page-istorijos.php with every
   rule as an inline style. It is now real, editable core blocks in post_content,
   so the styling that used to live in those style="" attributes lives here.
   Values are transcribed 1:1 from the old inline styles -- including the ones
   that only look odd (the CTA is Arial/line-height:normal because the old markup
   was a bare <button>, which takes those from the UA sheet; keeping them makes
   the ported page pixel-identical). Gated in functions.php to pages 75/76.
   Selectors are deliberately two-class (0,2,0) so they outrank both core's flow
   layout `> *` margin reset and blocks.css's `.entry-content h1/h2` (0,1,1). */

/* The old markup painted the page container; the native <main> is bare. */
body.page-id-75 #main-content,
body.page-id-76 #main-content { background: #FAF7F5; }

/* ---- back link ------------------------------------------------------- */
.istorijos-page-content > .stories-back { margin: 0 0 1.75rem; }
.istorijos-page-content .stories-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F2421;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.2s;
}
.istorijos-page-content .stories-back a::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: none;
    background: center / 20px 20px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F2421' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}
.istorijos-page-content .stories-back a:hover { transform: translateX(-3px); }

/* ---- page title ------------------------------------------------------ */
.istorijos-page-content .stories-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    color: #381219;
    margin: 0 0 2.5rem;
    letter-spacing: -0.5px;
}

/* ---- grid ------------------------------------------------------------ */
.istorijos-page-content > .stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
    margin: 0 0 3.5rem;
}

/* ---- card ------------------------------------------------------------ */
.stories-grid > .story-card {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stories-grid > .story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.story-card > .story-card__top { margin: 0; padding: 0; }

.story-card .story-card__media {
    position: relative;
    width: 100%;
    height: 220px;
    background: #EAE5DF;
    overflow: hidden;
    margin: 0;
}
.story-card .story-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
    border-radius: 0;
}
/* injected by the wp:html island at the end of the section */
.story-card .story-card__bookmark {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.story-card .story-card__bookmark[data-saved="true"] { background: #EF5E35; }

.story-card > .story-card__top > .story-card__body { padding: 1.5rem 1.5rem 1rem; margin: 0; }
.story-card__body > .story-card__date {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: #096846;
    margin: 0 0 0.5rem;
    text-transform: capitalize;
}
.story-card__body > .story-card__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F2613;
    margin: 0 0 0.85rem;
    line-height: 1.25;
}
.story-card__body > .story-card__text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333333;
    margin: 0;
}

/* ---- card footer: avatar, hairline, Facebook pill -------------------- */
.story-card > .story-card__foot {
    padding: 0 1.5rem 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.story-card .story-card__avatar {
    margin: 0;
    flex: none;
    width: 48px;
    height: 48px;
}
.story-card .story-card__avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    max-width: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.story-card .story-card__fb {
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.story-card .story-card__fb::before {
    content: "";
    height: 1px;
    background: #E5E5E5;
    flex: 1;
}
.story-card .story-card__fb a {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    background: #1877F2 center / 14px 14px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.story-card .story-card__fb a:hover { opacity: 0.85; }

/* ---- load-more CTA --------------------------------------------------- */
.istorijos-page-content > .stories-more { margin: 0; }
.stories-more .wp-block-button__link {
    background: #2A6D36;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 3.75rem;
    font-family: Arial, sans-serif;   /* the old CTA was a bare <button> (UA font) */
    font-weight: 700;
    font-size: 1.1rem;
    line-height: normal;              /* ditto: <button> defaults to normal */
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(42, 109, 54, 0.25);
    transition: all 0.2s ease;
}
.stories-more .wp-block-button__link:hover {
    background: #23582D;
    transform: translateY(-2px);
    color: #FFFFFF;
}