/* ==========================================================================
   components.css
   Shared styles for resources/views/components/*.blade.php
   (header.blade.php, articles.blade.php, view_insights.blade.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header / breadcrumbs (header.blade.php)
   -------------------------------------------------------------------------- */
.breadcrumbs {
    position: relative;
}

.breadcrumbs::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 10, 20, 0.55) 0%, rgba(2, 10, 20, 0.15) 70%);
    pointer-events: none;
}

.breadcrumbs > .container {
    position: relative;
    z-index: 1;
}

.header-cta-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 24px 20px;
}

/* Journal title (header.blade.php) — smaller than Bootstrap's default .display-6 */
.header-journal-title {
    font-size: calc(1.5rem + 1.1vw);
}

@media (min-width: 1200px) {
    .header-journal-title {
        font-size: 2rem;
    }
}

/* Editor-in-chief / editorial board / ISSN links — subtle brand-orange hover
   so they read as clickable instead of plain white text */
.header-info-link h4,
.header-info-link p {
    transition: color 0.3s;
}

.header-info-link:hover h4,
.header-info-link:hover p {
    color: #EA6222 !important;
}

/* Navy instead of Bootstrap's default light blue, matching the site's brand
   navy used everywhere else (logo, nav links, footer) */
.header-cta-card .btn-primary {
    background-color: #012970;
    border-color: #012970;
}

.header-cta-card .btn-primary:hover,
.header-cta-card .btn-primary:focus {
    background-color: #01184a;
    border-color: #01184a;
}

.header-cta-card .btn {
    transition: transform 0.2s, box-shadow 0.2s;
}

.header-cta-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* !important needed: overrides style.css's .yellow-background (#f8aa02) */
.yellow-background {
    background: #EA6222 !important;
}

/* --------------------------------------------------------------------------
   Insight / stat panels (articles.blade.php, view_insights.blade.php)
   -------------------------------------------------------------------------- */
.insights-panel {
    padding: 20px;
}

/* Default (grey) divider — used on plain white cards, e.g. view_insights.blade.php */
.insight-item {
    border-left: 2px solid #6c757d;
    padding-left: 20px;
}

.insight-item:first-child {
    border-left: none;
}

/* White divider variant for the orange bar in articles.blade.php */
.insights-highlight .insight-item {
    border-left-color: rgba(255, 255, 255, 0.35);
    padding-left: 20px;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Clickable stat boxes (articles.blade.php) — each links out to more detail */
.insight-item.insight-link {
    cursor: pointer;
}

.insight-item.insight-link a {
    display: block;
    color: inherit;
}

.icon-info {
    font-size: 0.8em;
    color: #6c757d;
}

.price-highlight {
    color: #fff;
    background-color: #EA6222;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
}

/* display:block (no <br>) so every item stacks with the same gap — a <br>
   as a direct child of the flex column above was being treated as its own
   flex item with a large phantom height, which is why the 4 items used to
   look unevenly spaced. */
.stat-value {
    display: block;
    font-size: 1.3rem;
    line-height: 1.3;
    color: #fff;
}

.stat-label {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

.insights-highlight {
    background: #EA6222;
    border-radius: 12px;
    padding: 28px 20px;
}

/* Wrapper that lets the "ดูรายละเอียด" button float over the panel's edge */
.insights-highlight-wrap {
    position: relative;
    margin-bottom: 28px;
}

.btn-insights-float {
    position: absolute;
    right: 28px;
    bottom: -30px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 24px;
    background: #1d2030;
    color: #fff;
    border: 1px solid rgba(255, 140, 66, 0.6);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(234, 98, 34, 0.15), 0 10px 22px rgba(0, 0, 0, 0.3), 0 0 18px rgba(234, 98, 34, 0.35);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-insights-float:hover {
    background: #1d2030;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(234, 98, 34, 0.3), 0 12px 26px rgba(0, 0, 0, 0.35), 0 0 26px rgba(234, 98, 34, 0.55);
    transform: translateY(-3px);
}

.btn-insights-float i {
    font-size: 1.2rem;
}

@media (max-width: 576px) {
    .btn-insights-float {
        right: 16px;
        bottom: -18px;
        padding: 8px 18px;
        font-size: 0.75rem;
    }
}

.section-title {
    display: inline-block;
    color: #EA6222;
    padding-bottom: 8px;
    margin-bottom: 20px;
    border-bottom: 3px solid #EA6222;
}

/* --------------------------------------------------------------------------
   Testimonials / issue slider (articles.blade.php)
   -------------------------------------------------------------------------- */

/* แถบปุ่มเลื่อน + pagination ใต้ slider แทนลูกศรที่ทับเนื้อหาการ์ด */
.testimonials-slider {
    padding-bottom: 20px;
}

/* .swiper has overflow:hidden (needed for the sliding itself) — this vertical
   breathing room keeps .issue-card's hover lift/shadow from being clipped by
   it instead of trying to fight that with overflow:visible */
.testimonials-slider .swiper-slide {
    /* Swiper's core CSS sets height:100%, but the containing .swiper never
       gets a definite height of its own (it just sizes to content) — so that
       100% has nothing solid to resolve against and each slide silently
       falls back to its OWN content height instead of stretching to match
       its neighbours. Overriding to the literal keyword auto removes that
       ambiguity: flexbox's default align-items:stretch then reliably sizes
       every slide (and the h-100 card/archive tile inside it) to match the
       tallest one in the row, on every breakpoint. */
    height: auto;
    padding: 14px 4px 28px;
}

.swiper-bottom-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.testimonials-slider .swiper-button-prev,
.testimonials-slider .swiper-button-next {
    position: static;
    margin: 0;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: #EA6222;
    font-size: 14px;
}

.testimonials-slider .swiper-button-prev::after,
.testimonials-slider .swiper-button-next::after,
.testimonials-slider .swiper-button-prev svg,
.testimonials-slider .swiper-button-next svg {
    content: none !important;
    display: none !important;
}

.testimonials-slider .swiper-pagination {
    position: static !important;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    height: 30px;
    gap: 10px;
    width: auto !important;
    flex: 0 1 auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    line-height: 1;
}

.testimonials-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background: #f3cbb0;
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.testimonials-slider .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: #EA6222;
}

/* --------------------------------------------------------------------------
   Current issue / archive cards (articles.blade.php) — soft resting shadow
   that lifts and deepens on hover, shared by both "ฉบับปัจจุบัน" and
   "ฉบับสมบูรณ์" cards
   -------------------------------------------------------------------------- */
.issue-card {
    border: 1px solid rgba(2, 10, 20, 0.06);
    box-shadow: 0 4px 14px rgba(2, 10, 20, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.issue-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(2, 10, 20, 0.14), 0 0 0 1px rgba(234, 98, 34, 0.18);
}

/* --------------------------------------------------------------------------
   Small shared utilities (articles.blade.php)
   -------------------------------------------------------------------------- */

/* Thin accent stripe on top of the "current issue" cards */
.card-header-accent {
    padding: 2px 0;
}

.badge-xs {
    font-size: 10px;
}

.badge-sm {
    font-size: 12px;
}

/* DOI row: logo + truncated link, used on both the current-issue cards and
   the most-read panels */
.doi-row {
    display: flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}

.doi-logo {
    width: 22px;
    height: auto;
    flex: 0 0 auto;
    margin-right: 10px;
}

.doi-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 32px);
}

/* Action button row (HTML/PDF/Featured) — gap instead of manual spacer divs */
.article-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Smaller buttons for the tight "current issue" card footer */
.article-actions-sm .btn {
    font-size: 10px;
}

/* "ฉบับสมบูรณ์" archive tile — white matting (like a photo frame) around the
   cover image, name revealed as a caption overlay on hover, image zooms
   slightly. .archive-img-frame carries the clipping/radius that used to be
   on the outer link, so the white padding shows as a border around it. */
.archive-card-wrap {
    display: block;
    height: 100%;
    background: #fff;
    padding: 8px;
    border-radius: var(--bs-border-radius, 0.375rem);
    text-decoration: none;
}

.archive-img-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: calc(var(--bs-border-radius, 0.375rem) - 4px);
}

.archive-img-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.archive-card-wrap:hover .archive-img-frame img {
    transform: scale(1.06);
}

.archive-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 14px 12px;
    background: linear-gradient(0deg, rgba(234, 98, 34, 0.92) 0%, rgba(234, 98, 34, 0) 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.archive-card-wrap:hover .archive-overlay {
    opacity: 1;
    transform: translateY(0);
}

.archive-overlay span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   About journal (articles.blade.php) — full text, organized as a removable
   accordion (each .accordion-item can be deleted independently)
   -------------------------------------------------------------------------- */
.about-journal-panel {
    background: #fff;
    border: 1px solid rgba(2, 10, 20, 0.08);
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 4px 14px rgba(2, 10, 20, 0.06);
}

.about-journal-panel .about-intro {
    color: #3b3b3b;
    line-height: 1.8;
    margin-bottom: 0;
}

.about-journal-panel .about-subheading {
    font-weight: 700;
    color: #1d2030;
    margin-top: 16px;
    margin-bottom: 8px;
}

.about-scope-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.scope-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(234, 98, 34, 0.08);
    border: 1px solid rgba(234, 98, 34, 0.35);
    color: #EA6222;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Accordion — brand orange instead of Bootstrap's default blue */
.about-accordion .accordion-button {
    font-weight: 600;
    color: #1d2030;
}

.about-accordion .accordion-button:not(.collapsed) {
    color: #EA6222;
    background: rgba(234, 98, 34, 0.06);
    box-shadow: inset 0 -1px 0 rgba(234, 98, 34, 0.2);
}

.about-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(234, 98, 34, 0.2);
}

.about-list {
    padding-left: 20px;
    margin-bottom: 12px;
}

.about-list li {
    margin-bottom: 6px;
}

.about-list-inline {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.about-more-link {
    display: inline-flex;
    align-items: center;
    color: #EA6222;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.about-more-link:hover {
    text-decoration: underline;
    color: #EA6222;
}

.schedule-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: 10px;
    background: #f8f5f2;
    border: 1px solid rgba(2, 10, 20, 0.06);
    text-align: center;
}

.schedule-no {
    font-weight: 700;
    color: #1d2030;
    font-size: 0.85rem;
}

.schedule-range {
    font-size: 0.78rem;
    color: #6c757d;
}

/* --------------------------------------------------------------------------
   Most read panel (articles.blade.php)
   -------------------------------------------------------------------------- */
.mostread-card {
    border: none;
}

.mostread-thumb {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Brand orange instead of style.css's default blue (#4154f1), to match the
   rest of this page's orange accent (.section-title, .btn-insights-float) */
#mostread #portfolio-flters li:hover,
#mostread #portfolio-flters li.filter-active {
    color: #EA6222;
    border-color: #EA6222;
}