:root {
    /* Cor principal */
    --ao-blue: #184688;

    /* Mais escuras */
    --ao-blue-90: #133b73; /* ~10% mais escuro */
    --ao-blue-80: #103360;
    --ao-blue-70: #0c294d;
    --ao-blue-60: #091f3a;

    /* Mais claras */
    --ao-blue-110: #34629c; /* ~10% mais claro */
    --ao-blue-120: #507eb0;
    --ao-blue-130: #6c9ac4;
    --ao-blue-140: #88b6d8;
    --ao-pink: #d1005a;
    --ao-grey-bg: #eeeeee;
    --ao-text: #111;
    --ao-muted: #6b6b6b;
}

@font-face {
    font-family: "Variex OT";
    src: url(./fonts/Variex_Regular/Variex_Regular.ttf);
    font-display: optional;
}

article h1,
aside h1,
nav h1,
section h1 {
    font-size: var(--my-h1-size, 2rem);
}


.card-content.content {
    position: relative;
}

.title-as-plate {
    position: absolute;
    top: 270px;
    border-left: 8px solid var(--bulma-info);
    width: 90%;
    margin-left: 1%;
}

.photo-with-card .title-as-plate {
    bottom: 90px;
    top: auto;
}

.image-bg-article .title-as-plate {
    bottom: -25px;
    margin-left: 3%;
}
.title-as-plate.is-full-plate {
    margin-left: 5%;
    bottom: 16px;
    border-left: 8px solid var(--bulma-warning);
}

.is-limit-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
    text-overflow: ellipsis;
}

.is-limit-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
}

.has-ribbon {
    position: relative;
}

.ribbon {
    position: absolute;
    top: 0.5rem;
    right: -0.4rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--bulma-primary, #209cee);
    color: var(--bulma-scheme-invert, #fff);
    font-size: 0.90rem;
    font-weight: 600;
    border-radius: var(--bulma-radius, 4px);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.photo-with-card .ribbon {
    top: -0.5rem;
    right: -1.8rem;
}

.ribbon.is-info {
    background-color: var(--bulma-info, #209cee);
}

.ribbon.is-danger {
    background-color: var(--bulma-danger, #ff3860);
}

.ribbon.is-success {
    background-color: var(--bulma-success, #23d160);
}

.ribbon.is-warning {
    background-color: var(--bulma-warning, #ffdd57);
    color: var(--bulma-text, #000);
}
.is-placeholder {
    height: 0;
    margin: 0;
    padding: 0;
}

.font-10 { font-size: 10px; width: 100%; display: block; }
.font-12 { font-size: 12px; width: 100%; display: block; }

.image.is-small-thumb img {
    height: 150px;
    object-fit: cover;
    width: 100%;
}

.image.is-small-media-object img {
    height: 150px;
    object-fit: cover;
    width: 100%;
}

.image.is-plate-image-object img {
    height: 320px;
    object-fit: cover;
    width: 100%;
}

.navbar-submenu {
    border-top: 1px solid #ddd;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

a:has(> div.school-tab) {
    background: transparent linear-gradient(254deg, #FF6A00 0%, #EE0979 100%) 0% 0% no-repeat padding-box;
    font-family: "Variex OT", fantasy;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
}

div.school-tab {
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}

.is-rendered-block > *:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    width: 100%;
}

.is-mosaic .card-image figure.image img {
    height: 150px !important;
    object-fit: cover;
    width: 100%;
}

.photo-large-on-top .card-image figure.image img {
    height: 230px;
    object-fit: cover;
    width: 100%;
}

.is-mosaic h3 {
    font-size: 1.25rem !important;
}

.tab-pane {
    display: none;
}

.tab-pane.is-active {
    display: block;
}

@media screen and (max-width: 768px) {
    article.media {
        display: flex;
        flex-direction: column-reverse;
    }

    article.media .media-right {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: 0;
    }
    article.media .media-content h3 {
        margin-top: 1rem;
    }

    .title-as-plate {
        bottom: 140px;
    }
    .plate-lead {
        padding-top: 20px;
    }

    a:has(> div.school-tab) {
        background: transparent linear-gradient(254deg, #FF6A00 0%, #EE0979 100%) 0% 0% no-repeat padding-box;
        font-family: "Variex OT", fantasy;
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -o-transform: skew(0deg);
        transform: skew(0deg);
    }

    div.school-tab {
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -o-transform: skew(0deg);
        transform: skew(0deg);
    }
}

article h1.title {
    color: var(--ao-blue-70, hsl(0, 0%, 7%));
    line-height: 2.8rem;
}

article .title,
article .title a,
.latest-articles .title a
{
    color: var(--ao-blue-60, hsl(0, 0%, 7%));
    line-height: 1.8rem;
}
article .title, article .title a:hover {
    color: var(--ao-blue-110, hsl(0, 0%, 7%));
}

article.title-only .title,
.article-list .title,
.article-blue .title
{
    font-size: 1.2rem !important;
}

article .lead {
    font-size: 1.15rem;
}

.is-ao-blue-dark {
    background-color: var(--ao-blue-90, hsl(0, 0%, 7%));
    color: var(--bulma-light, white);
}

article .body p {
    padding: .7rem 0;
    font-size: 1.3rem;
}

.hero-body, .section {
    padding: 1rem 1.5rem;
}

.badge.is-warning:not(.is-outlined) {
    background-color: #f47c3c !important;
    color: whitesmoke;
}

button.hover-primary:hover {
    background-color: var(--bulma-info) !important;
    color: var(--bulma-info-invert, white) !important;
    border-color: transparent;
}

.is-ao-blue {
    color: var(--ao-blue-80);
}

.dev-layout-tag {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    font-size: 0.75rem;
    z-index: 10;
    pointer-events: none;
}

.dev-section-item-wrapper {
    margin-bottom: var(--bulma-block-spacing);
}

.article-preview.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    color: #363636; /* cor do texto normal */
    mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
}


.has-text-torrado {
    color: #DAA520 !important;
}

/* Container geral do carrossel */
.opinion-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
}

@media screen and (min-width: 768px) {
    .carousel-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (min-width: 1024px) {
    .carousel-item {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* Adicionamos gap entre os artigos aqui */
.carousel-article-inner {
    padding: 1rem;
}

/* Imagem redonda */
.carousel-item .image img {
    object-fit: cover;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

/* Alinhamento */
.carousel-item .media {
    display: flex;
    align-items: center;
}

/* Margens ajustadas */
.carousel-item .title {
    margin-bottom: 0.25rem;
}
.carousel-item .subtitle {
    margin-bottom: 0;
}


.carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.carousel-dots button {
    background-color: #bbb;
    border: none;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: background-color 0.3s;
}

.carousel-dots button.active {
    background-color: #3273dc;
    opacity: 1;
}

.box:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.opinion-article {
    position: relative;
}

.opinion-header {
    position: relative;
    padding-top: 3rem;
}

/* Posicionamento e estilo da imagem */
.opinion-author-image {
    position: absolute;
    top: -32px;           /* metade da altura da imagem (64px) para sair do header */
    right: 2rem;
    width: 128px;
    height: 128px;
    border: 3px solid white;
    border-radius: 4%;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.opinion-author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.box.h-100 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.carousel-container {
    position: relative;
    width: 100%;
}

.carousel-wrapper {
    position: relative;
    overflow: hidden;
}

.carousel-images {
    display: flex;
    transition: transform 0.6s ease;
    width: 100%;
}

.carousel-slide {
    flex: 0 0 100%;
    max-width: 100%;
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 10;
}

.carousel-nav.prev {
    left: 1rem;
}

.carousel-nav.next {
    right: 1rem;
}

.carousel-thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.thumbnail-btn {
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    outline: none;
}

.thumbnail-btn img {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: border-color 0.2s ease;
}

.thumbnail-btn.active img {
    border-color: #3273dc; /* Bulma primary */
}

.carousel-slide img {
    width: 100%;
    height: auto;
    max-height: 576px;
    object-fit: cover;
    border-radius: 4px;
}

/* Tablet */
@media screen and (max-width: 1023px) {
    .carousel-slide img {
        max-height: 400px;
    }
}

/* Telemóvel */
@media screen and (max-width: 768px) {
    .carousel-slide img {
        max-height: 300px;
    }
}

/* Telemóvel pequeno */
@media screen and (max-width: 400px) {
    .carousel-slide img {
        max-height: 220px;
    }
}

/* Article overlay card – image background with left half dark overlay */
/* All comments are in en_US */
.article-overlay-card{
    position: relative;
    display: block;
    width: 100%;
    /* keep a nice media aspect ratio */
    aspect-ratio: 16 / 9;
    background: #000 var(--cover-url) center / cover no-repeat;
    border-radius: 6px;
    overflow: hidden;
    height: 150px;
}

/* Left half dark mask */
.article-overlay-card .mask{
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 50%;
    background: rgba(0,0,0,.45);
    /* optional: smoother readability */
    backdrop-filter: saturate(120%) brightness(90%);
}

/* Title sits inside the masked half only */
.article-overlay-card .title{
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 50%;
    margin: 0;
    padding: 1rem;
    display: flex;
    align-items: flex-end;     /* title aligned to bottom like the reference */
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Spacing between stacked cards (Bulma already gives gap via columns).
   If you use a simple list, you can keep this helper: */
.article-overlay-card + .article-overlay-card { margin-top: .75rem; }

/* Responsive: give a little more room to text on very small screens */
@media (max-width: 768px){
    .article-overlay-card .mask,
    .article-overlay-card .title{ width: 70%; }
}