/* =====================================================
   Griffin Federal Republic
   Country Profile Page (Final Clean Version)
   Depends: common.css
===================================================== */


/* =========================
   PAGE BACKGROUND
========================= */

body{

margin:0;

font-family:"Noto Sans SC","Segoe UI",Arial,sans-serif;

color:#1c2a3a;


background-image:

linear-gradient(
180deg,
rgba(245,249,255,0.92),
rgba(235,243,255,0.94)
),

url("https://images.unsplash.com/photo-1451187580459-43490279c0fa");


background-size:cover;

background-position:center;

background-attachment:fixed;

}


/* =========================
   PAGE HERO
========================= */

.page-hero{

text-align:center;

padding:90px 20px 40px;

animation:fadeUp 0.7s ease both;

}


.page-hero h1{

font-size:32px;

color:#0f2d4a;

letter-spacing:2px;

margin-bottom:8px;

}


.page-hero p{

font-size:14px;

color:#60758a;

}


/* =========================
   ARTICLE CONTAINER
========================= */

.article-container{

max-width:1100px;

margin:auto;

padding:20px 40px 80px;

}


/* =========================
   ARTICLE BLOCK
========================= */

.article-block{

background:white;

padding:24px;

border-radius:12px;

margin-bottom:18px;


border:1px solid rgba(0,0,0,0.06);

box-shadow:0 6px 18px rgba(0,0,0,0.05);


transition:0.25s ease;


animation:fadeUp 0.6s ease both;

}


.article-block:hover{

transform:translateY(-4px);

box-shadow:0 14px 28px rgba(0,0,0,0.12);

border-color:#4a90e2;

}


.article-block h2{

font-size:18px;

color:#1d3557;

margin-bottom:10px;

}


.article-block p{

font-size:14px;

line-height:1.9;

color:#516b82;

}


/* =========================
   PURE TEXT SECTION (UPDATED)
========================= */

.text-section{

max-width:1200px;

margin:30px auto;

padding:0 30px 60px;

}


/* 纯文字内容（无标签、无前缀） */

.text-section p{

font-size:14px;

line-height:2.1;

color:#445a6b;


background:rgba(255,255,255,0.72);

padding:22px 24px;

border-radius:10px;


border:1px solid rgba(0,0,0,0.06);

backdrop-filter:blur(6px);


white-space:pre-line;

}


/* =========================
   ANIMATION
========================= */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(18px);

}


to{

opacity:1;

transform:translateY(0);

}

}


/* stagger effect */

.article-block:nth-child(1){ animation-delay:0.05s; }

.article-block:nth-child(2){ animation-delay:0.12s; }

.article-block:nth-child(3){ animation-delay:0.18s; }

.article-block:nth-child(4){ animation-delay:0.24s; }


/* =========================
   FOOTER
========================= */

footer{

text-align:center;

padding:30px;

font-size:12px;

color:#6b7f93;

background:#f8fbff;

border-top:1px solid rgba(0,0,0,0.06);

}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:700px){

.article-container{

padding:20px;

}

.page-hero h1{

font-size:26px;

}

.text-section{

padding:0 20px 40px;

}

}